如何返回 Observable<boolean> 在 Angular 6 中的受保护路线上的 canActivate

Question

I would like to guard a route with a CanActivate class. The documentation I have read always has the canActivate method returning a boolean value, but I think I need to return either Observable or Promise.

My app has a data store with a property user that is an Observable<User> .

When the app loads, user.role is undefined . After an initial http request, the user.role becomes either "user" or "guest". So, I need the canActivate method to wait until user.role is set to either "user" or "guest", then respond. Here is what I have now:

  canActivate(): Observable<boolean> {
    return new Observable((observer: Observer<boolean>): void => {
      this.state.user.subscribe((user: User) => {
        if (user.role === 'user') {
          observer.next(true);
        } else if (user.role === 'guest') {
          observer.next(false);
          this.router.navigate(['/login']);
        }
        // user is not set, wait for next value
      });
    });
  }

The problem I think is that the subscription keeps going, and my router is sometimes unexpectedly redirected when state.user is updated. How can I fix this. Or, is there a better way to do this?

Answer 1

Why you want to hang this observable if user.role is undefined ? In this way whole router is hanging. This may cause unexpected behavior like unwanted redirects.

I think you shouldn't hang this canActivate() method but return true or false as fast as possible in async way.

I don't know context of the problem. If you want to make sure user is authorized before running the application maybe better use APP_INITIALIZER ? This mechanism will "hang" whole application until some important things are done and resolve Promise .

Answer 2

Can you try this piece of code

canActivate(): Observable<boolean> {
    return this.state.user.map((user: User) => {
        if (user.role === 'user') {
          return true;
        } else if (user.role === 'guest') {
          this.router.navigate(['/login']);
          return false;
        }
        // user is not set, wait for next value
      });
  }