Handle auth token expirado

[diegoarcega]

Qual a melhor forma de mostrar uma modal e redirecionar o usuario pro login quando o authtoken expirar?

Se no meu projeto não tiver Redux e a autenticação estar sendo feita com a contextAPI e eu estar usando axios?

O que estou fazendo agora é usando o 'events' do node e quando o axios intercepta alguma requisição eu vejo se o token ta expirado, se tiver uso o EventsEmmiter pra disparar um evento que entao eu tenho um listener no app.js que vai disparar a modal e redirecionar o usuario pro login.

@fdaciuk

[fdaciuk]

Oi @diegoarcega! É mais ou menos por aí mesmo :) Não precisa necessariamente do EventEmitter: você pode ter um estado na sua Context que é setado quando o usuário está logado ou não.

Aí você consome esse estado no seu componente principal, e renderiza a Modal à partir dele :)

Enfim, tem várias formas de resolver o mesmo problema :)

[diegoarcega]

Legal, mas digamos que o usuario esteja dentro do app e fica parado no app até o Auth Token expirar, depois ele vai para uma nova pagina que engatilha uma API call com token expirado, a API vai voltar um 404 error. Neste caso por exemplo, como vc faria?

O react way de fazer isso talvez seria ter um try catch em cada api call que estejam dentro de um componente react, dai vc consegue fazer o handler de dentro do componente mesmo, mas pode ficar repetitivo né fazer em cada lugar.

Mas po, agora to aqui pensando, posso colocar um ErrorBoundary em volta do app e usar ele pra fazer tudo isso, dessa forma nao preciso repetir em cada componente.

Então, eu to fazendo o handler dentro do api.interceptors do axios.

api.interceptors.response.use(
  response => Promise.resolve(response),
  error => {
    if (error.message === 'Network Error') {
      const currentToken = AuthenticationUtils.getToken();
      const isTokenValid = currentToken && AuthenticationUtils.isTokenValid(currentToken);

      if (!isTokenValid) {
        const event = new CustomEvent(AuthenticationConstants.AUTHENTICATION_TOKEN_EXPIRED);
        return window.dispatchEvent(event);
      }
    }

    return Promise.reject(error.response.data);
  },
);```

[fdaciuk]

Então, no caso do token expirado, você pode trabalhar com o refreshToken. Normalmente com JWT você vai ter dois tokens: um para o request, e outro para quando o token de request expirar, você solicitar um novo token :)

[diegoarcega]

ah bacana, , acho que o backend dev da empresa tb nao deve saber ou nao quis implementar. Vou comentar isso com ele. valeu as dicas, abs!!

[fdaciuk]

Show! Qualquer coisa, grita ae :)