0

Tenho uma aplicação em Angular 2 que está consumindo uma API em Nodejs. Essa aplicação possui autenticação JWT. Meu problema é o seguinte: Quando o servidor em node é reiniciado, o usuário continua conseguindo navegar entre as páginas, porém, não visualiza o que está sendo requisitado para a API.

Isso porque quando o usuário se conecta ao sistema, eu guardo seu token no localStorage da aplicação e crio uma sessão no . Mesmo que o servidor esteja offline, a variável no localStorage continuará presente.

Aqui está meu canActivate (protegendo todas as rotas e redirecionando caso necessário):

canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot) {

const currentUser = this.authenticationService.currentUserValue;
if (currentUser) {
  // authorised so return true
  if (currentUser.permissions.basic_permissions === true && currentUser.permissions.owner === false) {

    this.router.navigate(["/demo"]);
  }
  return true;
}

// not logged in so redirect to login page with the return url
this.router.navigate(["/login"], { queryParams: { returnUrl: state.url } });
return false;
}

O serviço de autenticação, realizando o login:

login(username: string, password: string) {
return this.http
  .post<any>(
    `${this.APIEndpoint}/login`,
    { username, password },
    { withCredentials: true }
  )
  .pipe(
    map(user => {
      if (user && user.userInfo.token) {
        localStorage.setItem("currentUser", JSON.stringify(user.userInfo));
        this.currentUserSubject.next(user.userInfo);
        this.loggedIn = true;
      }

      return user.userInfo;
    })
  );
}
4
  • Você possui acesso ao seu backend ? Sabe ou tem algum aviso em algum lugar onde você é notificado que a queda ocorreu ? Se a resposta for sim, parte desse principio, procurar aonde esta armazenado algum tipo de logg, agora se a queda é por motivos do servidor onde você não sabe se ocorreu ou não a queda, será necessário implementar uma lógica de verificação, de tempo em tempo, ou em horarios determinados, o detalhe esta como irá fazer essa verificação, eu tentaria algo como utilizar o ping no endereço do servidor, caso resposta falsa, realiza procedimentos adequados Commented 13/06/2019 às 18:22
  • Sim, possuo acesso ao back-end. Porém, gostaria de fazer essa verificação no Front. Acredito ser mais produtivo. Pensei em deixar o front com uma função de tempos em tempos verificando o servidor, porém, acredito que não seria legal criar um timer apenas pra isso Commented 13/06/2019 às 18:57
  • Infelizmente nesse cenário, é a única maneira de conseguir oque deseja Commented 13/06/2019 às 19:03
  • 1
    Na verdade discordo, uma das maneiras que consegui fazer foi a partir de socket com o servidor. Assim que o socket cair, muito provavelmente o servidor está fora. Commented 14/06/2019 às 10:26

1 Resposta 1

1

Existem N possíveis soluções pra esse tipo de problema. Vou demonstrar como eu faço isso nas minhas aplicações.

Uma requisição para o servidor (utilizando o httpClient do angular common) da seguinte forma:

this.billsService.getBill(billId)
 .subscribe( res => {

       */ código caso haja sucesso na comunicação com a API */

  }, err => this.alertService.error('Houve um erro ao buscar a dívida. Falha na comunicação com a API'));

Caso o subscribe caia no erro (onde não conseguiu se comunicar com o servidor), eu informo uma mensagem pro usuário, informando que houve algum tipo de erro.

Mas caso você queira desconectar o usuário, basta você criar um canActivate que faz uma requisição para seu back-end, e caso seu subscribe caia no erro, você força o logout do usuário.

Exemplo de um código em que faço algo semelhante:

// metodo dentro do meu canActivate this.authService.isUpdated() .subscribe( () => {}, err => this.authService.logout() );


EDIT: (exemplo de canActivate completa)

export class AuthGuard implements CanActivate {

constructor(
    private userService: UserService,
    private router: Router,
    private authService: AuthService,
    private alertService: AlertService) {}

canActivate(
    route: ActivatedRouteSnapshot,
    state: RouterStateSnapshot): boolean | Observable<boolean> | Promise<boolean> {

    if (!this.userService.isLogged()) {
        this.router.navigate(['signin']);
        return false;
    }

    this.authService.isUpdated()
        .subscribe( res => {
            const response = res.body as ResponseApi;

            if (!response.error) {

                const currentBuild = response.data as SystemVersion;
                const localBuild   = this.authService.getCurrentVersionLoged();

                if (!(currentBuild.version === localBuild.version)) {
                    this.userService.logout();
                }

            } else {
                this.alertService.error('Não foi possível verificar as atualizações do sistema');
            }
        }, err => this.alertService.error('Não foi possível verificar as atualizações do sistema'));

    return true;
}

}

2
  • Dentro do canActivate é possível colocar mais de um método? Quando eu tentei fazer uma requisição dentro dele para meu back-end, me pareceu que ele realizava a requisição, porém, não realizada o restante da lógica que já possuo no código informado acima Commented 14/06/2019 às 17:49
  • @MatheusBernardi Sim, é possível utilizar quantos métodos queiser dentro do seu canActivate. ele somente é encerrado caso haja alguma exceção ou quando você retorna true ou false. Vou editar minha resposta e adicionar um exemple onde eu utilizo mais de um método para validar a rota; Commented 14/06/2019 às 17:58

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .