Como retornar Observable <boolean> em canActivate em uma rota guardada no Angular 6

votos
0

Eu gostaria de guardar uma rota com uma classe CanActivate. A documentação eu li tem sempre o canActivatemétodo retornando um valor booleano, mas eu acho que preciso voltar tanto observável ou Promise.

Meu aplicativo tem um armazenamento de dados com uma propriedade userque é um Observable<User>.

Quando as cargas de aplicativos, user.role é undefined. Depois de uma solicitação HTTP inicial, o user.role se torna ou user ou convidado. Então, eu preciso o método canActivate que esperar até user.role é definido como usuário ou convidado, em seguida, responder. Aqui está o que eu tenho agora:

  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
      });
    });
  }

O problema que eu acho é que a subscrição continua indo, e meu roteador é às vezes inesperadamente redirecionado quando state.user é atualizado. Como posso consertar isso. Ou há uma maneira melhor de fazer isto?

Publicado 19/09/2018 em 13:21
fonte usuário
Em outras línguas...                            


2 respostas

votos
0

você pode tentar este pedaço de código

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
      });
  }
Respondeu 19/09/2018 em 13:59
fonte usuário

votos
0

Por que você quer pendurar este observável se user.roleé undefined? Desta forma router inteiro está pendurado. Isso pode causar um comportamento inesperado como redirecionamentos indesejados.

Eu acho que você não deve pendurar este canActivate()método, mas retornar trueou falseo mais rápido possível de forma assíncrona.

Eu não sei o contexto do problema. Se você quer ter certeza de usuário está autorizado antes de executar o aplicativo talvez seja melhor usar APP_INITIALIZER? Este mecanismo vai "travar" aplicação inteira até que algumas coisas importantes são feitas e resolver Promise.

Respondeu 19/09/2018 em 13:55
fonte usuário

Cookies help us deliver our services. By using our services, you agree to our use of cookies. Learn more