Solucionado (ver solução)
Solucionado
(ver solução)
3
respostas

Problema com o interceptor pegar erro 401

Olá Estou desenvolvendo uma aplicação angular e fiz um interceptor para enviar requisições e receber do back end. Quando o token expira e retorna o erro 401 do back-end, o interceptor apresenta dois problemas

1 - O interceptor não pega o erro 401, e sim ele identifica como error.status o valor 0.

2 - Ao pegar o erro ele faz o logout removendo o token expirado do local storage, porém não faz o redirecionamento para a página de login.

Se alguém souber ou tiver alguma ideia do que posso ser, agradeço.

Segue abaixo o código do interceptor:


@Injectable()
export class RequestInterceptor implements HttpInterceptor{


    constructor(private tokenSerice: TokenService,
        private usuarioService: UsuarioService,
        private router: Router){}

    intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {

        if(this.tokenSerice.hasToken()){
            const token = 'Bearer ' + this.tokenSerice.getToken();
            req = req.clone({
                    setHeaders:{
                        'Authorization': token,
                    },               
            })

        }
        return next.handle(req).pipe(catchError(error  => {
            error instanceof HttpResponse
            if(error.status === 401){
                this.usuarioService.logout();
                this.router.navigate(['']);
            }else{
                return throwError(error.message);
            }
        }))        
        
    }

}
3 respostas

Opa Raphael, tudo certo?

Sugiro que verifique se o serviço Router está sendo importado corretamente e se o método navigate está recebendo a rota correta da página de login. Ademais, certifique-se de que a rota 'login' esteja definida corretamente no arquivo de configuração de rotas do Angular.

Além disso, verifique se o servidor está retornando corretamente o código de status 401 para erros de autenticação. Certifique-se de que o servidor está configurado para retornar o código de status correto quando o token expirar. Além de se outros interceptadores não estão interferindo na captura do erro.

Fico à disposição.

Tenha um bom dia e bons estudos.

Olá gabriel. Obrigado pelo retorno. Todos os pontos que você citou já estavam corretos, isso tanto do lado do front quanto do back. De tanto procurar na internet, consegui achar a solução para um dos problemas que é o segundo, a parte do redirecionamento. Agora funciona com essa alteração que fiz no interceptor:

return next.handle(req).pipe( tap(() => {},
            (err: any) => {
                if(err instanceof HttpErrorResponse){
                    if(err.status !== 0){
                        return;
                    }
                    this.usuarioService.logout();
                    this.router.navigate(['']);
                }
            }

repare que mesmo retornando erro 401 do backend, ele reconhece o status com o valor 0. Se eu colocar 401 não reconhece

Segue abaixo o retorno do back no console, mas que não é reconhecido do interceptor: ![Insira aqui a descrição dessa imagem para ajudar na acessibilidade

solução!

Foi só eu dizer que achei a solução do outro ponto. No retorno do back, além do status, faltou adicionar no header o "Access-Control-Allow-Origin" como na linha abaixo:


response.addHeader("Access-Control-Allow-Origin", "*");

Quer mergulhar em tecnologia e aprendizagem?

Receba a newsletter que o nosso CEO escreve pessoalmente, com insights do mercado de trabalho, ciência e desenvolvimento de software