Angular 8 — Detectando ociosidade e expirando sessão do usuário.
Por que controlar o tempo de sessão do usuário?
Em determinadas aplicações web precisamos controlar o tempo de sessão de um usuário. Seja por medidas de segurança e/ou por controle de cobranças o usuário deve ser redirecionado novamente para a tela de entrada ou autenticação do sistema.
Neste artigo, apresento uma abordagem sobre como controlar o tempo de sessão de usuário que acessa uma aplicação web com o framework Angular. Quando este artigo foi escrito, utilizou-se o framework Angular em sua versão 8.3.21 e o pacote bn-ng-idle em sua versão 1.0.1.
Instalando o pacote BnNgIdle
O primeiro passo é instalar o pacote BnNgIdle em seu projeto Angular, para isso execute o seguinte comando:
npm install — save bn-ng-idle
Configurando o serviço na aplicação
O segundo passo é prover o serviço fornecido pelo pacote. Em um projeto Angular, um serviço deve ser provido por algum módulo ou componente e deve ser consumido por algum componente. Neste exemplo, o módulo raiz do projeto AppModule será o responsável por prover o serviço do pacote e o componente raiz do projeto o responsável por consumir o serviço.
O serviço BnNgIdleService será provido ao ser adicionado ao array providers do módulo.
Após ser provido pelo módulo o serviço deve então ser consumido, para isto iremos adicionar o serviço como parâmetro ao construtor do AppComponent, a injeção automática de dependências do Angular irá buscar por quem provê o serviço e então injetará no componente.
Com o serviço sendo injetado no componente temos agora acesso aos seus métodos. Este possui 3 métodos: startWatching, stopTime e resetTimer. O primeiro método é um observador e recebe como parâmetro o tempo de ociosidade, em segundos, a ser detectado, quando o usuário não interage com o sistema por um período igual ou maior que o tempo fornecido, este emite um sinal de que o usuário está inativo. O segundo método pausa o contador de tempo do primeiro método. O terceiro e último método reinicia o valor do contador.
Neste exemplo utilizaremos os dois primeiro métodos: startWatching e stopTime. No método de ciclo de vida do componente AppComponent, ngOnInit, utilizaremos o método startWatching passando como parâmetro tempo de ociosidade de 3 segundos, nos inscrevemos no observador e quando este emitir o valor iremos redirecionar o usuário para a tela de login do sistema.
É necessário que o serviço seja injetado também no componente de login, LoginComponent, de forma semelhante a injeção no AppComponent.
Também será utilizado o método de ciclo de vida do componente, ngOnInit, para pausar o contador de tempo do serviço.
Este projeto exemplo possui duas rotas: '/dashboard' e '/login'. Por padrão a rota '/dashboard' é carregada. Os componentes de cada rota são carregados dentro do component router-outlet que se encontra no template do AppComponent.
Exemplo de funcionamento
Ao acessar qualquer rota, o AppComponent é inicializado e o arquivo de rotas carrega os respectivos componentes dentro do router-outlet. Sendo assim, ao acessar '/dashboard' o AppComponent será carregado e em seguida o DashboardComponent será carregado dentro do router-outlet. Assim que o AppComponent é carregado, o evento ngOnInit é chamado e ocorre a inscrição no observador startWatching.
Ao carregar o sistema e permanecendo ocioso pelo tempo fornecido para o observador, neste exemplo foram 3 segundos, o observador emite um valor indicando que o usuário permaneceu inativo, a partir desta emissão acontece o redirecionamento do usuário para tela de login e o reset do contador de tempo.
Aplicação em produção
Em uma aplicação em produção é possível que o token de acesso a uma API esteja armazenado nos cookies do navegador ou no armazenamento local do navegador e a sessão esteja sendo controlado por algum registro em um banco de dados.
Ao identificar a ociosidade de um usuario no sistema além de redirecionar este para tela de login, deve-se também limpar o token de acesso de onde ele estiver armazenado e informar para API que a sessão deste usuário deve ser encerrada. Sendo assim, o usuário deve passar novamente pelo processo de autenticação do sistema para que uma nova sessão seja criada e um novo token gerado.
Agradecimentos
Obrigado por seguir o post até aqui. O código fonte deste tutorial esta disponível no Github:
