Portanto, para garantir que estamos desconectados quando o token expirar, adicionarei uma nova função em nossa
ação de
autenticação, na pasta de ações na autenticação. js, adicionarei aqui uma nova função na
qual desejo definir um timer que basicamente expire quando o token expirar. Portanto, podemos chamar esse timer de logout definido, por
exemplo,
e lá, espero obter o tempo de expiração. Aqui, podemos usar o bom e antigo timeout definido pelo React Native em sua versão Javascript
para definir um timer que expire após esse período e digamos que esse é um valor em milissegundos,
portanto, é apenas uma suposição que tenho e temos que garantir que
passamos os dados em milissegundos. Posteriormente, essa função aqui
será executada assim que o token expirar, e a pergunta é agora o que fazemos lá?
Bem, no final, eu quero enviar o
logout aqui, certo?
Portanto, definir o cronômetro de logout provavelmente não deve ser uma função normal, mas na verdade aqui,
terei uma função que tira proveito do Redux Thunk; portanto, onde temos
essa função em uma função em que essa função interna é despachada como argumento e, portanto,
uma vez que isso tarefa assíncrona concluída.
Depois que o cronômetro expirar, podemos despachar o logout, para que possamos despachar o resultado desse criador da ação, que é
essa ação no final,
para que isso aconteça quando o cronômetro terminar.
Agora, quando fizermos logout, também quero limpar todos os cronômetros em execução, porque talvez tenhamos que
definir o temporizador automaticamente aqui, o que não estamos definindo ainda, mas em breve o faremos, então quero limpar esse
cronômetro quando efetuarmos o logout manualmente para que Eu não
tenho esse cronômetro em andamento, mesmo sendo redundante. Então, podemos adicionar uma nova variável, talvez na
parte superior do arquivo, aqui denominada timer, que não foi inicializada inicialmente e, aqui, quando definirmos um
timer, definiremos o resultado do tempo limite definido como temporizador ou armazenará o resultado disso. no timer,
que é um ponteiro nesse timer e adicionar uma nova
função, talvez aqui, limpar o timer de logout, que agora é uma função normal, não uma função que obtém essa função interna de despacho,
mas uma função normal onde eu simplesmente chamo de clear timeout timer e o timer é aquela variável que aponta
para o timer.
Eu só quero verificar se o timer existe, se não é indefinido e se não
for indefinido, chamarei isso, clear timeout é uma função embutida no Javascript para se livrar desse timer.
Assim, com isso,
podemos limpar o cronômetro se não precisarmos mais dele e eu quero me
livrar dele sempre que fizermos logout; portanto, sempre que isso acontecer aqui, chamarei de cronômetro de logout claro e mais uma coisa que preciso
fazer quando Logout é necessário limpar meu armazenamento assíncrono, é claro.
Portanto, aqui, posso chamar o armazenamento assíncrono para remover os dados do usuário do item, novamente usando o mesmo identificador usado para armazenar os
dados.
Então, eu usei os dados do usuário
lá em baixo, preciso usar o mesmo identificador para limpá-los. Agora, remova o item retorna uma
promessa
e poderíamos esperar por isso; nesse caso, precisaríamos retornar a sintaxe interna onde obtemos o
despacho e realizamos nossa tarefa assíncrona; portanto, movemos esse código aqui para esse e então
podemos despachar esse açao.
Poderíamos fazer tudo isso se estivermos interessados no resultado
da remoção do item, mas aqui não estou interessado, acionarei isso e não esperarei que essa
promessa seja concluída. Em vez disso, retornarei imediatamente esse novo objeto de ação e eu acredito que isso será concluído.
Agora é claro que você pode reestruturar isso, mas é assim
que eu o farei, isso deve remover os dados do nosso armazenamento local. Portanto, com isso, o logout faz isso, temos a
função de timer de logout, que define um timer que efetua logout uma vez expirado. Agora, apenas precisamos garantir
que despachem esse criador de ação do timer de logout definido aqui, que usamos
esse criador de ação e Eu quero usar isso quando nos autenticarmos. Portanto, temos essa ação
de autenticação aqui e ali, no final, preciso despachar o cronômetro
de logoff definido e isso aqui. Então, agora, vou agora usar essa sintaxe diferente,
na qual obtemos essa função interna que recebe despacho, para que aqui eu possa despachar o
timer de logout definido para que isso seja acionado e, é claro, isso
também significa que aqui, em vez de retornar isso, também precisamos despachar isso, por
isso despachamos duas ações aqui, o que é absolutamente bom. Então, defino meu cronômetro e despacho a
ação de autenticação.
Agora, é claro, o cronômetro de logout precisa saber quanto tempo deve demorar, o tempo de expiração é
necessário e eu espero obter isso, esse tempo de expiração apenas para misturar nomes, como um argumento aqui na autenticação para que eu
possa encaminhar isso aqui ao meu cronômetro de logout.
Isso significa que todo lugar em que despacharmos a ação de autenticação ou onde usamos esse criador de ação, devo
dizer, todo lugar em que fizermos isso não precisará apenas fornecer o userId e o token, mas também
o tempo de expiração e que
começa aqui com inscrever-se. Quando nos inscrevemos,
temos nossa data de validade aqui e enviamos a autenticação. Agora a autenticação também precisa do tempo de
expiração.
Agora, o bom é que aqui é muito fácil descobrir quando isso
expira, porque os temos nos dados de resposta, temos esse campo expirado no campo, que é,
obviamente, uma string, portanto, com parseInt, podemos converter isso em um número e isso será em segundos, autentique e defina os valores esperados do
cronômetro de logout em milissegundos, então multiplicarei isso
por 1000 e também o adicionarei no logon, é claro. Lá, acrescentarei também que, como terceiro argumento
aqui, para que, para o login quando
despacharmos essa ação de autenticação, também repassemos nosso tempo de expiração que estamos
recebendo do Firebase. Agora, também temos um outro lugar onde
precisamos fazer isso, que é a
tela de inicialização, porque lá também despachamos a autenticação e aqui precisamos calcular o tempo restante, porque isso entra em ação
sempre que reiniciarmos
o aplicativo, então aqui não sabemos quanto tempo levará para o
token expirar e precisamos calcular isso.
Então, aqui eu posso calcular o tempo de expiração basicamente pegando a data de expiração, que é um objeto de data, e chamando get time, o que
me dá seu carimbo de data / hora em milissegundos desde o início dos tempos e daí eu
tenho que
deduzir o tempo de obtenção do carimbo de data atual, portanto, o registro de data
e hora atual em milissegundos. Isso será no futuro, agora
é, portanto,
a diferença deve ser um número positivo, porque eu estou verificando se é o futuro
aqui, então esse deve ser um número positivo em milissegundos.
Portanto, agora o tempo de expiração aqui pode ser encaminhado para autenticação e, com isso, devemos ter o logout
automático também.
Agora, para validar
que isso funciona, vamos para o auth. arquivo js e, na verdade, lá, na função de ajuste do
cronômetro de logout, dividirei temporariamente o tempo de expiração por 1000, o que significa que dividirei os milissegundos por 1000, que os
transforma em segundos e
isso significa que devemos sair instantaneamente agora.
Se eu recarregar, estou desconectado, mas em breve você perceberá que existem apenas teoricamente obras. Se eu fizer login novamente, estou
logado e agora que dividi o valor por 1000, devo
sair depois das 3. 6 segundos, mas não estou. Posso navegar, mas se
eu recarregar, na verdade agora estou desconectado. Então, isso meio que limpou os dados, mas não nos levou de volta à tela
de autenticação,
e a razão disso é que nunca instruímos o React Native a nos levar de volta à tela de autenticação, então
essa é a peça que falta.
Limpar nossa loja Redux é bom, mas em reação a essa liberação, precisamos garantir que
somos levados de volta à tela de autenticação. Para garantir que isso aconteça, precisamos de um lugar que seja sempre renderizado,
que envolva todo o nosso aplicativo, onde possamos ouvir nossa loja Redux e descobrir quando nosso token for redefinido para nulo, para que, se isso acontecer, possamos
navegar de volta para o tela de autenticação. Agora esse seria o aplicativo. arquivo js porque isso envolve tudo,
mas o problema
está aí, eu configurei o Redux aqui. Portanto, o Redux em minha loja está disponível apenas
aqui, em componentes filho aninhados e esse já é meu componente de navegador ao qual não tenho
acesso direto.
A solução é simplesmente envolvê-lo com outro componente. Vou criar isso na pasta de
navegação porque o nomeei contêiner de navegação.
Agora, este é um componente React normal, como este, onde
eu não preciso de nada do React Native, mas onde acabei de configurar meu componente de contêiner de navegação onde
recebo adereços e retorno jsx no final e o exporto como um contêiner de navegação padrão.
Agora, lá dentro, quero configurar minha navegação, então importarei o navegador de loja do navegador de loja que está na
mesma pasta e será isso que retornarei aqui,
meu navegador de loja como este. Agora eu posso usar meu contêiner de navegação aqui no aplicativo. arquivo js, então, em vez de
importar o navegador da loja aqui, importo meu contêiner de navegação da pasta de navegação e do arquivo do contêiner de
navegação e uso o contêiner de navegação aqui em vez do navegador da loja.
Agora, isso é simplesmente um invólucro em torno do navegador da loja, mas como ele está dentro do provedor,
agora tenho acesso ao Redux lá.
Portanto, aqui, podemos importar o seletor de uso do React Redux e usá-lo aqui para acessar o Redux.
Portanto, aqui no contêiner de navegação, eu posso simplesmente acessar o isAuth, digamos, usando o seletor de uso que aceita essa função que me dá acesso ao estado Redux e,
então, eu posso acessar o estado. auth. token para obter acesso
ao token na minha fatia de estado de autenticação e usar o operador double bang para forçar basicamente que isso
seja verdadeiro ou falso e, se não tivermos token, isso será falso, então isAuth será falso nesse
caso, se tivermos um token será verdadeiro, então
isAuth será verdadeiro se tivermos um token que faça sentido, eu acho. Agora podemos usar o efeito aqui para reagir a
mudanças nisso.
Portanto, aqui em efeito de uso, minha matriz de dependência inclui isAuth,
portanto, quando isAuth muda, essa função de efeito deve ser executada e, portanto, aqui, posso verificar se não estamos autenticados porque é
isso que me interessa, se isAuth
não é verdadeiro , se for verdade, não me importo, mas se não for verdade, desejo navegar para
a tela de autenticação e agora temos outro problema.
O navegador está aqui e somente nos componentes que são renderizados com a ajuda do navegador,
temos acesso aos acessórios. navegação. Navegue, mas felizmente, o React Navigation nos dá uma saída. Podemos usar um
ref para obter acesso à funcionalidade de navegação com a ajuda
deste componente quando o usamos em nosso código jsx. Podemos criar essa ref com use ref com o gancho use ref
e simplesmente criamos nossa nav ref aqui chamando use
ref como esta e você deve estar ciente das referências no React, que é basicamente uma maneira
de acessar diretamente um elemento que você render em jsx e agora podemos adicionar a propriedade ref ao navegador da loja e atribuí-la
a nav ref ou o contrário.
Portanto, isso estabelece uma conexão entre a constante nav ref e esse elemento que no final é renderizado aqui
e agora com isso aqui no efeito, podemos chamar navRef. atual, é assim que os árbitros
funcionam,
eles têm um despacho de propriedade atual. Despacho é um método disponibilizado pelo navegador da loja ou por este contêiner de aplicativo, no final, porque
o contêiner da loja nada mais é do que o ShopNavigator. js exporta, que é um componente de contêiner
de aplicativo e esse componente tem um método de despacho que podemos usar para despachar
uma ação de navegação. Para isso, agora
precisamos importar algo da navegação React e que algo é o objeto de ações de navegação aqui
e aqui, chamamos NavigationActions. navegar e agora
isso nos permite navegar. No entanto, não com auth como esse, mas isso requer
um objeto como argumento, onde você configura o nome da rota e agora pode ser auth.
É assim que agora podemos navegar de dentro desse componente, mesmo que esteja fora do navegador.
Portanto, isso vai para auth sempre que nosso estado isAuth muda para não autenticado, isso também significa que, no navegador
da loja, em nosso botão de logout, não precisamos navegar aqui porque, se acionarmos o logout, se
despacharmos essa ação , limpamos o token no Redux e, portanto, isso deve
acionar automaticamente nossa navegação graças a esse contêiner de
navegação. Portanto, se salvarmos isso, devemos navegar para autenticação quando o token for inválido.
Então agora, se eu entrar novamente, depois das 3. Em 6 segundos, devemos sair e ver que
estamos desconectados,
sim, isso parece bom.
Vamos tentar novamente
aqui, sim, voltando e também tentar fazer logout manual.
Então, se eu for logar, abra isso, clique em sair, isso também funciona.
Então, com isso, incorporamos a funcionalidade de logoff
automático, agora vamos voltar ao arquivo de ação auth e remover essa divisão fictícia aqui porque eu
fiz isso apenas para testes, é claro que não quero reduzir manualmente
meu tempo de expiração , agora aqui temos uma funcionalidade que funciona e que garante que não importa
se estamos nos inscrevendo ou fazendo login ou o que estamos fazendo, temos um token que armazenamos, que podemos
usar e está certificando-se de que também estamos desconectados automaticamente se nosso token expirar.
Esta é a aplicação finalizada aqui.