Então, como podemos sair dessa tela de autenticação agora se estivermos logados ou se fizemos uma inscrição com sucesso?
Bem, isso não é muito difícil.
Se passarmos por este despacho aqui sem aterrissar no bloco catch, então ele
ainda está aqui no
bloco try, podemos apenas chamar adereços. navegação. navegue exatamente como sempre fizemos e
navegue até a tela diferente que configuramos em
nosso navegador de comutadores, portanto, neste caso, na tela da loja. Então, vamos fazer isso, vamos simplesmente fazer compras e lá por
enquanto, assim que fizermos login com êxito, o que farei agora, isso carrega e
estamos aqui. Agora, recebo um
aviso aqui sobre alguma atualização de estado que não pôde ser executada; esse
conjunto está carregando o estado que agora falha se sairmos. A solução é simplesmente que não devemos tentar atualizar o estado nessa
tela se não estiver mais na tela, para que possamos simplesmente movê-lo para o bloco catch, pois precisamos redefinir o carregamento apenas
se houver um erro porque esse é o único caso em que permanecemos na tela de autenticação; caso
contrário, não precisamos alterar o estado de
carregamento porque estamos deixando a tela de qualquer maneira. Então, com isso, vamos nos
livrar disso também,
se agora tentar novamente, aqui vamos nós e
agora
estamos em nossa loja principal. Agora, é claro, ainda não estamos utilizando
o token, então vamos
fazer isso também. Para isso, vamos ao redutor de autenticação e adicionamos um estado inicial que descreve basicamente com
qual estado queremos iniciar e qual é o nosso general. state shape
is e lá eu quero armazenar o token que inicialmente é nulo e quero armazenar o
userId que inicialmente é nulo, portanto, um estado inicial muito básico.
Em seguida, podemos exportar a função redutora que leva esse estado inicial e também recebe,
é claro, uma ação. Aqui, quero ativar o tipo de ação como sempre e tenho dois
casos nos quais estou interessado agora.
Uma é a ação de logon; portanto, você precisa importar esse identificador da pasta de ações e do arquivo auth
e o outro caso é a ação de inscrição; portanto,
é necessário importar esse
identificador também; em outros casos, eu só quero retorne meu estado. Portanto, se fizermos login, desejo retornar um novo estado onde o
token deve estar, digamos ação. token e userId devem ser ação. userId e essa é a mesma
atualização que eu preciso na inscrição para que possamos copiar isso por lá.
Agora, é claro, precisamos ter certeza de que nossa ação transporta token e userId;
portanto, no criador da ação no final da inscrição aqui, quando despachar a ação de inscrição, precisamos adicionar um
campo de token e adicionar um userId campo.
Agora, o token pode ser obtido a partir dos dados de resposta, existe esse token de ID e o mesmo aqui, resData não é um token de ID,
mas é localId e você vê isso aqui no log, localId, esse aqui é o userId e, se você
rolar para cima , Token de identificação, esse é o token. Então é isso que eu envio aqui e podemos
copiar isso e usar o mesmo, quase o mesmo para fazer
login, a única coisa que precisa mudar é esse identificador e você pode até unir o login e inscrever-se
em um identificador de autenticação combinado, digamos porque em um redutor, estamos fazendo a mesma coisa de qualquer maneira.
Então, eu apenas o dividi aqui para ficar claro que temos duas coisas diferentes no final, mas a
atualização é a mesma, então podemos definitivamente combinar esses dois tipos de ação.
Então, com isso, agora estamos armazenando o token e isso é legal,
mas para que precisamos desse token novamente?
Precisamos do token que agora estamos armazenando para acessar nossa API e, para isso, vamos ao Firebase e ao banco
de dados.
Lembre-se de que, quando configuramos esse banco de dados, mencionei que você deveria iniciar
neste modo de teste, se lembrar. O que isso fez foi configurar determinadas regras e você
pode verificá-las se clicar na guia Regras. Isso controla quem pode ler e gravar em seu
banco de dados e, no momento, isso é definido como verdadeiro, o que significa que todos podem ler tudo e
todos podem escrever tudo.
Obviamente, isso não é o que você deseja; em vez disso, definirei os dois para autenticação desigual como nulo, o que pode parecer estranho e isso deve ser aspas
duplas, mas essa é a sintaxe do Firebase e você pode aprender mais sobre as regras aqui. clicando
em saiba mais ou simplesmente no Google for Firebase, as regras de segurança do
banco de dados em tempo real.
O que isso diz ao Firebase é que apenas usuários autenticados, portanto, somente usuários que enviam
a solicitação com um token válido devem poder ler e escrever.
Agora você pode até argumentar que o Redux sempre
deve ser permitido, podemos definir isso como verdadeiro e você pode ser ainda mais específico em relação às regras, para dizer que o Redux
de produtos é permitido,
o Redux de pedidos não é,
mas novamente isso é algo que você pode verificar com os documentos oficiais.
Eu irei com a configuração em que o Redux sempre é permitido, mas a escrita não é.
Portanto, agora, para escrever, precisamos de
um token, caso contrário, enfrentaremos um problema. Se fizermos login aqui e estivermos armazenando o token, mas não
o anexarmos às solicitações no
momento, você verá que podemos carregar todos
os dados, tudo bem, mas você também notará que, se eu tentar editar isso e remover alguns
dos pontos de exclamação aqui, no final, recebo um erro e esse erro é gerado porque não tenho permissão para escrever e,
portanto, o Firebase bloqueia o acesso e retorna uma resposta de erro.
Portanto, agora precisamos aproveitar o token armazenado em um redutor e, na verdade, anexá-lo às nossas
solicitações de saída.
Agora, antes de tudo, precisamos registrar esse redutor em
nosso redutor de raiz, portanto, no aplicativo. arquivo js, precisamos importá-lo, precisamos importar o redutor de autenticação da loja e
lá a pasta redutores e, o arquivo auth e adicioná-lo aos redutores combinados, talvez esteja aqui com a chave auth, mas é claro
que você pode usar qualquer chave que você quiser. Isso nos permitirá alavancar isso
e acessar esse token, mas agora precisamos anexá-lo às solicitações de saída, por exemplo, para
produtos, precisamos anexá-lo à solicitação que enviamos
para atualizar produtos, de modo que seria essa solicitação aqui. Agora, a maneira como você anexa uma solicitação no Firebase pode ser
encontrada nos documentos oficiais do Firebase para autenticação do usuário do banco de dados em tempo real aqui. No
final, o que você aprendeu é que você pode anexar um token à sua solicitação de saída simplesmente adicionando essa consulta de autenticação parâmetro
no final do seu URL de solicitação.
Então aqui no final, precisamos adicionar um ponto de interrogação igual
e, então, aqui, precisamos ter nosso token. Agora, como podemos obter acesso ao token aqui?
Estamos no criador da ação, o que significa que não temos acesso fácil à
loja aqui, à loja Redux ou não? Redux Thunk, aquele pacote legal que nos permite escrever essa sintaxe com
a função que recebe a função de despacho, que na verdade nos dá algo doce.
Também podemos alterar um pouco essa função e não apenas obter despacho, mas também obter um segundo
argumento, que é outra função que nos dá acesso ao estado Redux, para
que tenhamos acesso ao estado atual de nossa loja Redux. Portanto, se eu registrar o resultado do estado get aqui, vamos
ver o que isso nos
dá e, para evitar erros, por enquanto, aqui apenas adicionarei uma string vazia para que possamos testar esse código.
Obviamente, isso não vai funcionar, mas vamos corrigi-lo em breve, então vamos ver o que está dentro desse estado se executarmos
isso.
Então,
é hora de fazer login novamente muito rápido e,
em seguida, vá para a tela do administrador e tente editar isso, o que
obviamente ainda falhará, mas isso não importa, porque agora, se eu
clicar aqui, sim, falhará, mas o que você verá aqui no log, o que obtemos é uma saída completa de
nossa loja Redux completa. Esta é a nossa
loja Redux, obtemos um objeto com nossa fatia de estado de autenticação que ainda tem outro objeto com nosso token e com
o ID do usuário, nossa fatia de estado do cartão, nossa fatia de estado de pedidos e nossa fatia de estado de produtos.
Portanto, isso permite que eu tenha acesso ao meu repositório Redux e ao token, para que
o token possa ser buscado executando getState. auth. token, porque isso nos dá acesso
ao nosso repositório completo do Redux, e então nos dá acesso à fatia de autenticação e à propriedade
do token que estamos gerenciando nessa fatia de autenticação. E agora no criador de
ações de produtos, podemos adicionar esse token aqui no final. Portanto, aqui podemos apenas substituir essa string pela variável token que
contém nosso token e
agora, se salvarmos isso, com esta pequena alteração, se agora fizermos login novamente e
mais tarde também mudaremos isso, de
modo que não precisaremos constantemente relogin, não se preocupe. Se fizermos login novamente, vamos ao admin, clique em adicioná-lo aqui e agora
tentamos isso, isso funciona novamente porque agora o token está anexado, o Firebase o valida e determina que é válido porque
é claro que não nos misturamos
com ele , é um token válido e, portanto, isso simplesmente funciona.
Agora, não precisamos apenas do token quando atualizamos nossos produtos, também
precisamos quando adicionamos um novo produto. Então, copio essa lógica e adiciono a
mesma aqui. Quando criamos um produto, recebo meu token com a ajuda desse segundo argumento, que
podemos obter aqui se precisarmos,
a função get state e isso me permite altere essas aspas simples para back ticks, para que eu possa adicionar
convenientemente esse parâmetro de consulta aqui no final com ponto de interrogação igual e igual ao meu token.
Portanto, agora podemos criar um produto e atualizar um produto, excluir, claro, também é
uma solicitação de gravação. Portanto, para excluir o produto, farei o mesmo, obter acesso à minha loja com
a função get state aqui e adicionar ponto de interrogação daqui no final e adicione o token.
Então isso é uma coisa.
Agora, nos pedidos, é uma coisa semelhante, lá para buscar, não precisamos disso, mas para adicionar, precisamos porque adicionar
é uma operação de gravação.
Então, lá, obtemos o estado, se quisermos, podemos extrair o token de lá com a mesma abordagem de antes
e podemos anexá-lo aqui e ali; na verdade, também precisaremos do userId em breve, portanto, tomaremos cuidado sobre isso na próxima aula,
mas, por enquanto, apenas anexe
o token em todos os lugares e agora
vamos ver como podemos garantir que os pedidos realmente pertençam ao nosso usuário.