Angular 4 - canActivate observable, not callable

AuthService calls with RxJs

This was one of the things I struggled with when switching from AngularJs promises to Angular Observable pattern. You can see that promises pull notifications and observables pull push notifications. So you have to rethink your AuthService to use the push pattern. I was thinking all the time about how to pull it out, even when the working observers wrote. I couldn't stop thinking in terms of pull.

The promise template was easier. When the AuthService has been created, it will either create a promise that is allowed to "not log in" or it will create an asynchronous promise that will "restore the registration state". Then you can have a named method isLoggedIn()

that will return this promise. This allowed you to easily handle delays between showing custom data and receiving custom data.

AuthService as a Push Service

Now we're switching to Observables, and the verb is " should be changed to " when " . Making this little change will help you rethink how things will work. So let's rename" isLoggedIn "to" whenLoggedIn () ", which will be an observable that emits data when the user authenticates.

class AuthService {
     private logIns: Subject = new Subject<UserData>();

     public setUser(user: UserData) {
          this.logIns.next(user);
     }

     public whenLoggedIn(): Observable<UserData> {
          return this.logIns;
     }
}

// example
AuthService.whenLoggedIn().subscribe(console.log);
AuthService.setUser(new UserData());

      

        
        
        
      

    

When the user went to setUser

, it issued a subscription that the new user was authenticated.

Problems with closer

The above contains several issues that need to be fixed.

• subscription whenLoggedIn
  
  will listen to new users forever. The thrust flow never ends.
• There is no concept of "current state". The previous one setUser
  
  is lost after clicking on subscribers.
• It only reports when the user is authenticated. Not if there is no current user.

We can fix some of this by switching from Subject

to BehaviorSubject

.

class AuthService {
     private logIns: Subject = new BehaviorSubject<UserData>(null);

     public setUser(user: UserData) {
          this.logIns.next(user);
     }

     public whenLoggedIn(): Observable<UserData> {
          return this.logIns;
     }
}

// example
AuthService.whenLoggedIn().first().subscribe(console.log);
AuthService.setUser(new UserData());

      

        
        
        
      

    

This is much closer to what we want.

Changes

• BehaviorSubject
  
  will always print the last value for each new subscription .
• whenLoggedIn().first()
  
  was added to subscribe and auto-unsubscribe after getting the first value. If we weren't using it BehaviorSubject
  
  , this would block until someone called setUser
  
  , which may never happen.

Problems with BehaviorSubject

BehaviorSubject

doesn't work for AuthService and I'll demonstrate some sample code here.

class AuthService {
     private logIns: Subject = new BehaviorSubject<UserData>(null);

     public constructor(userSessionToken:string, tokenService: TokenService) {
          if(userSessionToken) {
              tokenService.create(userSessionToken).subscribe((user:UserData) => {
                    this.logIns.next(user);
               });
         }
     }

     public setUser(user: UserData) {
          this.logIns.next(user);
     }

     public whenLoggedIn(): Observable<UserData> {
          return this.logIns;
     }
}

      

        
        
        
      

    

This is how the problem appears in your code.

// example
let auth = new AuthService("my_token", tokenService);
auth.whenLoggedIn().first().subscribe(console.log);

      

        
        
        
      

    

The above creates a new AuthService with a token to restore the user session, but when it starts the console just prints "null".

This is due to the fact that it BehaviorSubject

is created with an initial value null

, and the user session restore operation will occur later after the HTTP call completes. The AuthService will keep emitting null

until the session is restored, but that's a problem when you want to use route activators.

ReplaySubject is better

We want to remember the current user, but we don't emit anything until we know if there is a user or not. ReplaySubject

is the answer to this problem.

You can use it here.

class AuthService {
     private logIns: Subject<UserData> = new ReplaySubject(1);

     public constructor(userSessionToken:string, tokenService: TokenService) {
          if(userSessionToken) {
              tokenService.create(userSessionToken).subscribe((user:UserData) => {
                    this.logIns.next(user);
               }, ()=> {
                    this.logIns.next(null);
                    console.error('could not restore session');
               });
         } else {
             this.logIns.next(null);
         }
     }

     public setUser(user: UserData) {
          this.logIns.next(user);
     }

     public whenLoggedIn(): Observable<UserData> {
          return this.logIns;
     }
}

// example
let auth = new AuthService("my_token", tokenService);
auth.whenLoggedIn().first().subscribe(console.log);

      

        
        
        
      

    

The above will not wait until the first value is selected by value whenLoggedIn

. It will get the value first

and unsubscribe.

ReplaySubject

works because it remembers the elements 1

or emits nothing. It's nothing important. When we use AuthService in canActivate

, we want to wait until the state of the user is known.

CanActivate example

This now makes it much easier to record a user defender redirecting to the login screen or allowing a reroute.

class UserGuard implements CanActivate {
      public constructor(private auth: AuthService, private router: Router) {
      }

      public canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<boolean> {
           return this.auth.whenLoggedIn()
                      .first()
                      .do((user:UserData) => {
                          if(user === null) {
                              this.router.navigate('/login');
                          }
                      })
                      .map((user:UserData) => !!user);
      }

      

        
        
        
      

    

This will result in observing true or false if there is a user session. It also blocks the router from changing until this state is known (i.e. are we fetching data from the server?).

It will also redirect the router to the login screen if there is no user data.