Assim, conseguimos muito,
somos capazes de gravar dados, buscar dados,
usar nosso token para escopo de dados ou produtos
e pedidos para nosso usuário atualmente conectado, somos capazes
de efetuar login e assim por
diante, e isso é ótimo.
Uma coisa que não estamos fazendo agora é que não continuamos nossas sessões,
por assim dizer. Se eu recarregar, sempre preciso fazer
o login novamente
e não é exatamente isso que eu quero, seria bom se pudéssemos entrar automaticamente se tivermos um token
válido e, para isso, precisamos fazer duas coisas - precisamos armazenar o token em algum lugar do dispositivo, não no Redux, porque
o Redux está na memória e isso será perdido sempre que o aplicativo reiniciar.
Portanto, ele precisa estar em algum lugar
no disco rígido do dispositivo, por assim dizer, além disso, precisamos verificar esse armazenamento sempre que nosso aplicativo iniciar e definir automaticamente
o token no Redux e redirecionar o usuário se encontrarmos um token válido.
Agora vamos começar com o armazenamento, porque esse é um primeiro passo lógico. Para armazenar, precisamos importar algo aqui
no criador da ação, não no criador da ação
do produto, mas na realidade aqui no criador da ação do auth. É necessário importar o armazenamento assíncrono do React Native.
Com isso
importado, podemos usar isso para salvar dados no dispositivo, o armazenamento assíncrono é uma API React Native que, no final, usa um armazenamento
de valor-chave no dispositivo que está disponível no iOS e no Android, onde podemos armazenar dados
que persistem nas reinicializações de aplicativos, para que possamos usar para salvar dados que não são perdidos quando
o aplicativo é iniciado ou reiniciado.
Então, adicionarei uma nova função, salvarei os dados no armazenamento ou algo assim e espero obter
meu token e meu userId, os dois dados em que estou interessado aqui e agora podemos usar o armazenamento assíncrono defina
um item que é como você salva os dados e o item que você define precisa ser uma cadeia de caracteres, mas antes de tudo você
precisa definir uma chave e eu irei chamá-los
de dados do usuário, mas isso depende de você,
você precisará dessa chave mais tarde recuperar seus dados e o segundo valor
agora é uma string,
portanto, a string que você deseja salvar lá e você deve salvar essencialmente uma string.
Agora
isso não é problema, podemos usar json. stringify para converter um objeto Javascript em uma string, e o
objeto que eu quero converter é um objeto que contém meu token que recebo como argumento aqui e que contém o
userId que recebo como argumento.
Então, no final, salvamos esse objeto como uma string no dispositivo.
Agora só precisamos chamar salvar dados no armazenamento sempre que terminarmos o login ou a inscrição, então talvez depois de despachar
o login, possamos chamar salvar dados no armazenamento e encaminhar resData. idToken
e resData. localId, as mesmas coisas que usamos no Redux e
definitivamente queremos usá-las lá, porque o Redux é importante para
o aplicativo em execução, mas também o guardo no dispositivo para quando queremos carregá-lo quando o aplicativo reiniciar.
Agora, porém, isso por si só não fará o truque e, é claro, também precisamos fazê-lo
ao se inscrever, mas isso por si só não fará o truque, precisaremos de uma informação extra aqui antes de continuar.
Você sabe qual? Precisamos saber quanto tempo o token é válido, pois você não
deve esquecer que, eventualmente, ele expirará, e é por isso que, para fazer login e se inscrever, você obtém a
chave expiresIn na resposta, que indica em segundos quanto tempo leva para o seu token. é inválido e o Firebase não
aceita mais.
Também precisamos armazenar essas informações, porque, se voltarmos mais tarde, se reiniciarmos o aplicativo após três horas,
nosso token provavelmente será inválido; portanto, precisamos saber quando o token
será invalidado para que, quando verificarmos isso,
quando o o aplicativo reinicia, quando verificamos se temos um token, sabemos se esse token que
podemos encontrar ainda é relevante ou se já é inválido e precisamos de um novo token de qualquer maneira,
caso em que não devemos fazer login automaticamente no usuário.
Então, eu quero armazenar a data de
validade e criarei a data de validade aqui como uma constante, um novo objeto de data que, no final, deve
ter a data atual e adicionar o tempo de validade.
Agora, a nova data pega um objeto de data, mas, com o get time, obtemos o timestamp atual em milissegundos desde o
início dos tempos, por assim dizer, que é aqui em
1970 em Javascript.
Portanto, é uma quantidade em milissegundos e, para isso, podemos adicionar resData. expira em.
Isso é uma quantidade de segundos, então precisamos convertê-lo
em milissegundos e também é uma string, por isso precisamos convertê-lo em um número.
Então, aqui, adicionarei um sinal de mais aqui ou simplesmente analise-o alternativamente para convertê-lo em um número inteiro e, em seguida, multiplico-o
por 1000 para convertê-lo de segundos para milissegundos, porque obter tempo também nos fornece milissegundos.
Agora, o que isso me dá é um novo registro de data e hora no futuro, que é
o horário atual mais o horário de expiração, e o embrulho em outro objeto de data para convertê-lo novamente
de um número enorme de milissegundos em um objeto de data concreto. Agora, essa data de validade é o que também precisamos passar para
salvar os dados no armazenamento. Portanto, espero obter a data de validade
também e precisamos anexá-la aqui.
Então, aqui eu posso nomear essa data de validade talvez
para misturar as coisas, essa é a minha data de validade e lá quero chamar esse pequeno método toISOString, que podemos chamar em
objetos de data, porque isso a converterá em uma string em um formato
padronizado que Eu quero salvar
Agora, é isso que eu quero fazer para me inscrever, então isso
pode ser copiado por lá e
é isso que eu
quero fazer lá também, crie a data de validade e salve-a no armazenamento.
Agora, estamos salvando isso no armazenamento, o que é bom,
mas agora também precisamos verificar isso ao fazer login. Uma boa maneira de fazer isso é criar
uma nova tela e, na verdade, eu o crio fora das minhas pastas existentes na pasta screens,
mas nem na loja nem no usuário, e vou nomear essa tela de inicialização e você pode nomear como quiser. quer.
A ideia é que eu mostre essa tela enquanto meu aplicativo estiver inicializando e estou descobrindo se o usuário está autenticado ou não
e isso será
super rápido, é provável que
nem a tela seja exibida quando o aplicativo for iniciado. Agora, aqui, criamos um componente React
regular importando reagir de reagir e, lá, importo coisas do React
Native, para ser preciso, preciso de uma visualização, o indicador de
atividade para mostrar um botão giratório de carregamento enquanto o aplicativo está inicializando e também folha
de estilo e também armazenamento assíncrono, porque aqui também quero acessar o armazenamento assíncrono para
descobrir se temos ou não um token válido.
Então, aqui, eu tenho meu componente da tela de inicialização, que é um componente React regular e o objeto
da folha de estilo aqui na Folha de estilo. criar e, no final, podemos exportar essa tela de inicialização assim. Agora, no componente, apresentarei aqui o
indicador de atividade com um tamanho grande e uma cor de cores. primário e, para isso, é necessário importar essas cores
constantemente, é claro, e também atribuir um pouco de estilo aqui para a visualização,
e eu vou usar apenas estilos. tela aqui que agora podemos adicionar à folha de
estilo e que deve ser muito
simples, flexione uma, justifique o centro de conteúdo e alinhe o centro de itens para algum
conteúdo centralizado na vertical e na horizontal. Agora é claro que as coisas realmente importantes acontecem
acima do código jsx, é aqui que agora precisamos verificar o
armazenamento assíncrono em busca de um token válido e posso fazer isso com a ajuda do efeito de uso,
o que me permite executar alguma
lógica aqui quando esse componente montado e, de fato, aqui, não precisarei de nenhuma dependência, porque aqui dentro do efeito de uso, agora quero adicionar uma nova
função que chamarei de tentar inscrever-se ou tentar fazer login é mais adequada e uso a função separada porque aqui eu
deseja usar o Async Aguardar, o que eu posso fazer, criando a função interna que agora posso chamar aqui,
tente fazer
o login, porque novamente, async aqui nesta função que você passa a usar efeito não seria
realmente permitido e, aqui, tente o login, o objetivo
agora é verificar se há um token válido no armazenamento assíncrono. Então, eu recebo meus dados de usuário aqui acessando o
AsyncStorage. getItem
e use a chave que você usou para armazenar.
Portanto, no meu caso, são dados do usuário, mas você deve usar a chave que usou na sua autenticação. js na pasta actions para
armazenar seus dados com armazenamento assíncrono. Então, eu recupero isso e agora o importante a saber aqui
é que o item get, como todos os métodos de armazenamento assíncrono, é realmente assíncrono, o que significa que o nome
sugere, eu acho, o que significa que você recebe uma promessa aqui, para que possamos aguardar isso
e isso nos devolverá os dados do usuário.
Agora, esses são os dados como uma string. Para convertê-los em um dado com o
qual podemos trabalhar, terei meus dados transformados com JSON. analisa os dados do usuário e isso analisa uma sequência
no formato JSON e a converte em um objeto ou matriz Javascript. Agora, antes mesmo de tentar isso, vou verificar se os dados do usuário não são
verdadeiros;
portanto, se não estiverem configurados, se não conseguirmos encontrar nenhum dado para essa chave, porque sei que certamente não
estamos logados.
Então, aqui eu quero retornar e não continuar e fazer uma
coisa importante, usarei a navegação de acessórios e navegarei para a tela de autenticação porque essa tela de inicialização
deve ser
adicionada ao navegador, para que possamos importá-la, importar a tela de inicialização a partir da pasta screens, é claro,
a tela de inicialização e a adicionamos ao
navegador principal aqui, então, onde também temos auth e shop e lá no topo, adiciono startup e aponto na minha tela de inicialização.
Isso significa que esta é a primeira coisa que carrego aqui.
Agora, nesta tela de inicialização, portanto, vou para a tela de autenticação se não conseguirmos encontrar um token;
portanto, graças ao navegador de comutadores, deixo essa tela e vou para a tela de autenticação ou
para a pilha de autenticação porque não encontro um token. Portanto, se passarmos disso por verificação, temos pelo menos alguns dados, mas o token
ainda pode ser inválido.
Portanto, é claro que teremos o token, o userId e a data de validade que podemos extrair dos dados transformados
após esta linha, aqui
com este objeto destruindo a sintaxe e
estes são os três dados com os três nomes exatamente iguais que eu armazeno aqui no
auth. arquivo js. Portanto,
aqui temos um objeto com um campo token, userId
e data de validade, é
o que armazenamos no armazenamento assíncrono, é o que posso recuperar aqui.
Agora precisamos verificar se o token ainda é
válido e, para isso, posso recriar minha data de validade usando a nova data e a data de validade que na verdade são uma string no formato ISO e
agora podemos adicionar uma verificação if e
ver se data de validade, portanto, a data em que o token se
torna inválido, se for menor ou igual à nova data, que é o carimbo de data / hora atual, o
que significa que a data de validade está no passado e, se estiver no passado, nosso token é inválido.
Também é inválido se não conseguirmos encontrar um token ou se não
conseguirmos encontrar um userId, se alguma das três condições for verdadeira, teremos um token inválido ou
um userId inválido ou algo assim.
Portanto, nesse caso, também quero retornar e, é claro,
navegar para a tela de autenticação. Se passarmos por isso, se verificar, temos
um token, temos um userId e o token ainda é válido.
Então, se você fizer isso aqui, chamarei adereços. navegação. navegar na loja para ir para a tela
da loja e também importante, preciso fazer o login do usuário e,
para isso, precisamos de uma nova ação, porque não quero enviar
uma solicitação agora, só quero alterar alguns dados no Redux. Então, adicionarei um novo criador de
ação aqui, exportar const autentique talvez o que leva meu userId e meu token e que é usado para alterar meus dados no Redux e, para isso, agora adicionarei
um
novo identificador de ação, autenticado com uma string de autenticar aqui e usá-lo aqui como um tipo de autenticação, anexe meu
userId, que é meu userId aqui, e meu token, que é o token que recebo como
argumento, e agora essa ação de autenticação é o que quero despachar aqui na
tela de inicialização.
Mas antes de fazer isso, a propósito, também podemos voltar para o criador da ação
e, no final da inscrição, em vez de despachar minha própria ação de inscrição personalizada aqui, também podemos despachar autenticar
e executar
isso aqui, esse criador da ação e simplesmente encaminhe resData. localId como userId e resData. idToken como um token
e faça o mesmo no final do login.
Então agora eu realmente combinei esses dois fluxos porque, no final, acontece o mesmo; agora,
no redutor, no redutor de autenticação, é claro, em vez de verificar o login e a inscrição,
podemos simplesmente importar autenticar e usar esse identificador aqui, Livre-se da inscrição e eu apenas comentarei para continuar vivendo
aqui como referência, porque acontece a mesma coisa.
Portanto, agora a combinação faz sentido, porque também precisamos dele para esse login automático.
Então aqui também o despacho aqui para o login manual e a inscrição manual
e, é claro, agora com isso, se você quiser, também pode se livrar do login e se inscrever
aqui, desses dois identificadores, porque não use-os mais.
Mas com isso, de volta à tela de inicialização,
agora também podemos despachar isso e, para isso, você só precisa importar o despacho de uso do React Redux e importar a ação; portanto, importe tudo
como ações de autenticação, talvez da pasta da loja, do diretório pasta de ações e do arquivo de autenticação
lá e, em
seguida, aqui no início, obtenha acesso à função de despacho chamando use dispatch e com isso
disponível, aqui podemos adicionar despacho como uma dependência, mas isso nunca muda, portanto o
efeito nunca será executado novamente e aqui, depois de navegar para a loja, agora também quero
despachar ações de autenticação, autenticar e encaminhar o userId extraído, portanto, este campo aqui e o token extraído, portanto, este campo que obtive do
meu armazenamento assíncrono e que agora deve me conectar automaticamente . Foi muito trabalho, vamos ver
se funciona. Se eu recarregar isso, acabarei aqui na tela de
logon, porque agora não tenho tokens válidos armazenados no armazenamento assíncrono.
Portanto, agora, se eu tentar fazer login aqui, sou encaminhado, se agora recarregar, acabarei aqui novamente e isso é ótimo, porque
agora isso significa que isso parece funcionar e que o token está armazenado.
Agora, é claro, seria bom se também pudéssemos sair, porque, no momento, não há como
fazer isso.