Como efetuar logoff automático de um usuário após o JWT expirar no Angular

Foto de Mahdis Mousavi no Unsplash

Então, você lê alguns tutoriais, talvez tenha se aprofundado um pouco na documentação e, após algum tempo de codificação de qualidade, você tem uma boa primeira aplicação Angular com tudo o que deseja para iniciantes: design elegante, componentes de materiais, rotas protegidas usando proteções e um sistema de login como parte de um back-end feito com o NodeJS? ou era primavera?

Tudo parece funcionar até que, espere, o JSON Web Token expirou, mas você ainda está olhando para essa exibição protegida. Provavelmente não é nada demais, o usuário não pode realmente interagir com o back-end, porque bem, o token expirou, mas com certeza esse é um detalhe que deve ser polido. Digite RxJS.

Se você codificou isso, é provável que você já tenha tocado em algum RxJS e tenha visto um monte de Observáveis ​​por aí. Caso contrário, veja uma definição rápida no site do projeto:

O RxJS é uma biblioteca para programação reativa usando Observables, para facilitar a composição de código assíncrono ou baseado em retorno de chamada.

Serviços de resgate

Suponho que você tenha a lógica de autenticação em um serviço de autenticação dedicado. Isso ocorre porque o status do usuário não pode depender de um único componente.

Sem mais delongas, vamos dar uma olhada em algum código.

Fluxo de autenticação do usuário

Nesta implementação de exemplo, temos um fluxo de autenticação básico de 3 etapas, em que o usuário efetua login (o aplicativo armazena em algum lugar o JWT), o usuário interage com o back-end usando rotas / visualizações protegidas (as solicitações Http são interceptadas e um cabeçalho de autorização é anexado para eles) e, finalmente, o usuário efetua logout ou o JWT expira, o que ocorrer primeiro.

Lógica de login

Do nosso componente de login, enviamos as credenciais do usuário para o back-end. Se estiver tudo bem, chamamos o método storeUserData (), que salva o JWT e o nome de usuário no Session Storage, calcula o tempo restante para esse token expirar e finalmente chama nosso expirationCounter () para assumir o trabalho.

Lógica do contador de expiração JWT

Vamos agora lidar com a real espera de o token expirar para reagir. Primeiro, queremos nos livrar das assinaturas anteriores. Para fazer isso, cancele a inscrição, perdoe a redundância, a propriedade Subscription que definimos na classe.

Em seguida, criamos um novo, vamos começar passando um Observable 'of (null)' falso, do qual canalizaremos um atraso exatamente da quantidade de tempo que resta para o JWT expirar e, finalmente, quando isso ocorrer, chamamos nosso método de logout e direcionamos o usuário para a página de login.

Lógica de logout

No método de logout, primeiro nos certificamos de cancelar a assinatura de qualquer assinatura em andamento, por exemplo, o usuário desconectado antes do término da sessão e, finalmente, limpamos as propriedades da classe e o armazenamento de sessão de todas as informações relacionadas à sessão.

Para obter mais informações, consulte os documentos ou, melhor ainda, este guia super útil, com exemplos, explicações e recursos para o RxJS.

Obrigado pela leitura.