使CanActivate等待Subject计算

Question

I am trying to implement an authentication guard in my Angular + Firebase application.

I am using a combination of Firebase Authentication (FA) and Firebase Cloud Firestore (FCF) to save users. Therefore, just FA User isn't enough, I need to find the same user in FCF to consider the user logged-in.

During registration, I am saving the users in FCF under the id same as the uid of that user in FA.

In my authentication.service :

    export class AuthenticationService {

      public authenticatedUserSubject: Subject<null | User> = new Subject <null | User>();

      public constructor(
        private readonly angularFireAuth: AngularFireAuth,
        private readonly angularFirestore: AngularFirestore
      ) {    
        this.angularFireAuth.authState.subscribe(    
          (userInfo: null | UserInfo) => {    
            if (userInfo === null) {    
              this.authenticatedUserSubject.next(null);    
            } else {    
              this.angularFirestore.collection<User>('users').doc<User>(userInfo.uid).valueChanges().pipe(take(1)).subscribe(
                (user: undefined | User): void => {   
                  if (typeof user === 'undefined') {
                    this.authenticatedUserSubject.next(null);
                  } else {
                    this.authenticatedUserSubject.next(user);
                  }
                }
              );
            }
          }
        ); 
      }   
    }

According to my understanding, when the service is initialised, this piece of code will start listening to changes in FA user, following which I will check the FCF user and update authenticatedUserSubject .

In my authenticated.guard :

    public canActivate(activatedRouteSnapshot: ActivatedRouteSnapshot, routerStateSnapshot: RouterStateSnapshot): Observable<boolean> {
        return this.authenticationService.authenticatedUserSubject.pipe(take(1)).pipe(  
          map( 
            (user: null | User): boolean => {
              if (user === null) {
                this.router.navigateByUrl('/sign-in');
                return false;
              } else {
                return true;
              }
            }
          )
        );
      }

Problems:

• The guard does not receive any value from the subject
• If I use BehaviourSubject instead of Subject with an initial value of null , refreshing the page will emit null as the default value, throwing the user to /sign-in

Goals:

• On refresh / load of application, the authenticatedUserSubject should be calculated before the route guard runs
• On logout, the guard should be aware of the state change

Also, if there is a better way to implement this, please let me know!

Answer 1

I guess you can use BehaviorSubject with initial value of null as you said but all you have to do in your guard is to use takeWhile in the following way.

public canActivate(activatedRouteSnapshot: ActivatedRouteSnapshot, routerStateSnapshot: RouterStateSnapshot): Observable<boolean> {

    return this.authenticationService.authenticatedUserSubject.pipe(
    tap((user: User) => {
       if(!user){
          this.router.navigate(['/sign-up']);
       }
    }),
    takeWhile((data) => data === null, true)
    );

  }

As you know method requires boolean so you can map it before takeWhile in pipe.

Hope this works for you cause I had the same problem and it worked.

Answer 2

You should use BehaviourSubject instead of Subject . The subject does not emit the last emitted value to the subscriber. Subscriber of Subject will get value only when Subject.next() after the subscription. This is not the case with BehaviourSubject . Subscriber will always get the last emitted value on subscription. With this let's try to improve your code a bit and see if your problem solves:

Change your service like this-

export class AuthenticationService {

    public authenticatedUserSubject: BehaviorSubject<User> = new BehaviorSubject<User>(null);

    public constructor(
      private readonly angularFireAuth: AngularFireAuth,
      private readonly angularFirestore: AngularFirestore
    ) {


        combineLatest(this.angularFireAuth.authState, 
                      this.angularFirestore.collection<User>('users').doc<User>(userInfo.uid).valueChanges()
                     )
                    .pipe(
                        tap(([userFromFireAuth, userFromFirestore]) => {
                            if (!userFromFireAuth) {
                                this.authenticatedUserSubject.next(null); 
                            } else {
                                if (typeof userFromFireAuth === 'undefined') {
                                    this.authenticatedUserSubject.next(null);
                                } else {
                                    this.authenticatedUserSubject.next(userFromFireAuth);
                                }
                            }
                        })
                    ).subscribe();       
    }   
  }

Having this will avoid chaining of subscribe()

Now let's rewrite canActivate like this:

public canActivate(activatedRouteSnapshot: ActivatedRouteSnapshot, routerStateSnapshot: RouterStateSnapshot): Observable<boolean> {

        return this.authenticationService.authenticatedUserSubject
                   .pipe(
                       //this will wait until user becomes NOT NULL
                       skipWhile(user => !user),
                       tap(user => {
                            if (!user) {
                                //this will be useful when user logged out and trying to reach a page which requires authentication
                                //NOTICE - When page is NOT refreshed
                                this.router.navigate(['/sign-up']);
                            }
                        }),
                        take(1),
                        map(() => true)
                   );                   
      }

Let us know if it works.