Alors, comment pouvons-nous quitter cet écran d'authentification maintenant si nous sommes connectés ou si nous nous sommes inscrits avec succès?
Eh bien, ce n'est pas trop difficile.
Si nous dépassons cette répartition ici sans atterrir dans le bloc catch, il est donc
toujours ici dans le bloc
try, nous pouvons simplement appeler des accessoires. la navigation. naviguez comme nous l'avons toujours fait et
accédez aux différents écrans que nous avons configurés dans
notre navigateur de commutation, donc dans ce cas à l'écran de la boutique. Alors faisons-le, allons simplement faire des emplettes et là pour l'instant dès
que nous nous connectons avec succès, ce que je vais maintenant faire, cela se charge et
nous sommes ici. Maintenant, je vais recevoir
un avertissement ici concernant une mise à jour d'état qui n'a pas pu être effectuée, c'est
que cet ensemble charge l'état qui échoue maintenant si nous naviguons. La solution est simplement que nous ne devrions pas essayer de mettre à
jour l'état sur cet écran si nous ne sommes plus sur l'écran, nous pouvons donc simplement le déplacer dans le bloc catch car nous
n'aurons besoin de réinitialiser le chargement qu'en cas d'erreur car c'est le seul cas où nous restons sur l'écran
d'authentification, sinon nous n'avons pas besoin de changer
l'état de chargement car nous quittons quand même l'écran. Donc, avec cela, nous nous débarrasserons
de cela également, si
je réessaye maintenant, nous y voilà et maintenant
nous
sommes dans notre magasin principal. Maintenant, nous n'utilisons toujours pas le jeton,
alors assurons-nous de le
faire également et pour cela, allons au réducteur d'authentification et ajoutez-y un état initial qui décrit essentiellement avec quel état
nous voulons commencer et ce que notre général la forme de l'état
est et là je veux stocker le jeton qui est initialement nul et je veux stocker
le userId qui est initialement nul, donc état initial très basique.
Ensuite, nous pouvons exporter la fonction de réduction qui prend cet état initial et qui reçoit
également bien sûr une action et ici, je veux activer le type d'action comme toujours et j'ai
deux cas qui m'intéressent en ce moment.
L'une est l'action de connexion, vous devez donc importer cet identifiant à partir du dossier actions et du
fichier d'authentification et l'autre cas est l'action d'inscription, vous
devez donc également importer
cet identifiant, dans d'autres cas, je veux juste retourner mon état. Donc, si nous nous connectons, je veux retourner un nouvel état où
le jeton devrait être disons action. token et userId devraient être une action. userId et c'est la même mise à jour
dont j'ai besoin pour vous inscrire afin que nous puissions simplement copier cela là-bas.
Maintenant, bien sûr, nous devons nous assurer que notre action porte un jeton et un ID
utilisateur, donc dans le créateur d'action à la fin de l'inscription ici lorsque j'envoie l'action d'inscription, nous devons ajouter un champ de
jeton et nous devons ajouter un ID utilisateur champ.
Maintenant, le jeton peut être obtenu à partir des données de réponse, il y a ce jeton ID et le même ici, resData n'est pas un jeton
ID mais c'est localId et vous voyez qu'ici dans le journal, localId, voici l'ID utilisateur et si vous
faites défiler vers le haut , Jeton d'identification, c'est le jeton. C'est ce que j'envoie ici et nous pouvons simplement
le copier et l'utiliser de la même manière, presque la même chose
pour la connexion, la seule chose qui doit changer est cet identifiant et vous pouvez même unir la connexion et
vous inscrire à un identifiant d'authentification combiné disons car dans un réducteur, on fait la même chose de toute façon.
Je viens donc de le diviser ici pour être clair que nous avons deux choses différentes à la fin, mais la
mise à jour est la même, nous pourrions donc certainement combiner ces deux types d'action.
Donc, avec cela, nous stockons maintenant le jeton et c'est bien, mais
pourquoi avons-nous besoin de ce jeton à nouveau?
Nous avons besoin de ce jeton que nous stockons maintenant pour accéder à notre API et pour cela, passons à Firebase et à la
base de données.
Gardez à l'esprit que lorsque nous avons créé cette base de données, j'ai mentionné que vous devriez commencer dans
ce mode de test si vous vous en souvenez. Ce que cela a fait, c'est qu'il a mis en place certaines règles et
vous pouvez les vérifier si vous cliquez sur l'onglet règles. Cela contrôle qui peut lire et écrire dans votre base
de données et pour le moment, cela est à la fois vrai, ce qui signifie que tout le monde peut tout lire et tout
le monde peut tout écrire.
Ce n'est bien sûr généralement pas ce que vous voulez, au lieu de cela, ici, je définirai les deux sur auth inégale à null, ce qui pourrait sembler étrange et cela devrait être
des guillemets en passant ici, mais c'est la syntaxe Firebase et vous pouvez en apprendre plus sur les règles ici en
en cliquant sur en savoir plus ou simplement sur google pour les règles de sécurité de la
base de données en temps réel Firebase.
Ce que cela indique à Firebase, c'est que seuls les utilisateurs authentifiés, donc seuls les utilisateurs qui
envoient la demande avec un jeton valide devraient pouvoir lire et écrire.
Maintenant, vous pourriez même faire valoir que Redux devrait toujours
être autorisé, nous pourrions définir cela sur true et vous pourriez même être plus précis concernant les règles afin que vous disiez que Redux des produits
est autorisé, que Redux
des commandes ne l'est pas, mais encore
une fois, c'est quelque chose que vous pouvez vérifier avec les documents officiels.
J'irai avec la configuration où Redux est toujours autorisé mais l'écriture ne l'est pas.
Alors maintenant, pour écrire, nous avons besoin
d'un jeton, sinon nous ferons face à un problème. Si nous nous connectons ici et que nous stockons le jeton
mais que nous ne l'ajoutons
pas aux demandes pour le moment, vous voyez que
nous pouvons charger toutes les données, c'est bien mais vous remarquerez également que si j'essaie de modifier cela
et d'en supprimer quelques-unes des points d'exclamation ici, à la fin, j'obtiens une erreur et cette erreur est levée car je ne suis pas
autorisé à écrire et Firebase bloque donc l'accès et renvoie une réponse d'erreur.
Alors maintenant, nous devons tirer parti du jeton qui est stocké dans un réducteur et l'ajouter réellement
à nos demandes sortantes.
Maintenant, pour cela, nous devons d'abord enregistrer ce réducteur
dans notre réducteur racine, donc dans l'application. fichier js, nous devons l'importer, nous devons importer le réducteur d'authentification du magasin et
là le dossier des réducteurs et là, le fichier d'authentification et l'ajouter aux réducteurs combinés, peut-être être ici avec la clé d'authentification mais bien sûr
vous pouvez utiliser n'importe quelle clé que vous voulez. Cela nous permettra ensuite d'en tirer parti
et d'accéder à ce jeton, mais nous devons maintenant le joindre aux demandes sortantes, par exemple pour les produits,
nous devons le joindre à la demande que nous envoyons
pour la mise à jour des produits, ce serait donc cette demande ici. Maintenant, la façon dont vous ajoutez une demande dans Firebase peut être trouvée
dans les documents officiels de Firebase pour l'authentification des utilisateurs de la base de données en temps réel ici, à
la fin ce que vous avez appris est que vous pouvez ajouter un jeton à votre demande sortante simplement en ajoutant cette requête d'authentification à
la fin de l'URL de votre demande.
Donc ici, à la fin, nous devons ajouter un point d'interrogation
égal, puis ici, nous devons avoir notre jeton. Maintenant, comment pouvons-nous accéder au jeton ici?
Nous sommes dans le créateur d'action, ce qui signifie que nous n'avons pas d'accès facile
au magasin ici, au magasin Redux ou non? Redux Thunk, ce joli paquet qui nous permet d'écrire cette syntaxe avec cette
fonction qui reçoit la fonction de répartition, qui nous donne en fait quelque chose de doux.
Nous pouvons également modifier un peu cette fonction et non seulement obtenir la répartition mais également obtenir un deuxième
argument qui est une autre fonction qui nous donne accès à l'état Redux,
nous avons donc accès à l'état actuel de notre magasin Redux. Donc, si je console le résultat de l'état get ici, voyons ce
que cela nous donne et pour
éviter les erreurs, pour le moment, ici je vais juste ajouter une chaîne vide pour que nous puissions tester ce code.
Bien sûr, cela ne fonctionnera pas, mais nous le corrigerons bientôt, alors voyons ce qu'il y a à l'intérieur de cet état si nous
l'exécutons.
Il
est donc temps de vous reconnecter très rapidement, puis
accédez à l'écran d'administration et essayez de modifier ce qui, bien sûr, échouera toujours, mais
cela n'a pas d'importance parce que si je clique ici, oui,
cela échoue, mais ce que vous verrez, c'est qu'ici dans le journal, ce que nous obtenons est une sortie complète de
notre magasin Redux complet. C'est notre magasin
Redux, nous obtenons un objet avec notre tranche d'état d'authentification qui a encore un autre objet avec notre jeton
et l'ID utilisateur, notre tranche d'état de carte, notre tranche d'état de commandes et notre tranche d'état de produits.
Cela me permet donc d'accéder à ma boutique Redux et d'accéder au jeton, afin que le
jeton puisse être récupéré en exécutant getState. auth. jeton parce que cela nous donne accès
à notre magasin Redux complet, cela nous donne alors accès à la tranche d'authentification et cela à la propriété
de jeton que nous gérons dans cette tranche d'authentification. Et maintenant, dans le créateur d'action
de produits, nous pouvons ajouter ce jeton ici à la fin. Donc, ici, nous pouvons simplement remplacer cette chaîne par la variable token qui
contient notre jeton et maintenant
si nous l'enregistrons, avec ce petit changement, si nous nous connectons à nouveau et plus tard, nous
changerons également cela de telle sorte que
nous n'avons pas constamment besoin de se reconnecter, pas de soucis. Si nous nous connectons à nouveau, nous allons à l'administrateur, cliquez sur l'ajouter ici et
maintenant nous essayons cela, cela fonctionne à nouveau parce que maintenant le jeton est ajouté, Firebase le valide et détermine qu'il est valide
car bien sûr nous ne l'avons pas
mélangé avec lui , c'est un jeton valide et donc cela fonctionne.
Maintenant, nous n'avons pas seulement besoin du jeton lorsque nous mettons à jour nos produits, nous
en avons également besoin lorsque nous ajoutons un nouveau produit. Je vais donc copier cette logique et ajouter
la même logique ici, lorsque nous créons un produit, j'obtiens mon jeton à l'aide de ce deuxième argument que
nous pouvons obtenir ici si nous
en avons besoin, la fonction get state et cela me permet de changez ces guillemets simples pour revenir aux ticks afin que je
puisse facilement ajouter ce paramètre de requête ici à la fin avec un point d'interrogation égal et égal à mon jeton.
Alors maintenant, nous pouvons créer un produit et mettre à jour un produit, la suppression est
bien sûr également une demande d'écriture, donc pour supprimer le produit, je ferai de même, j'aurai accès à mon magasin
avec la fonction get state ici, puis ajouter un point d'interrogation d'ici à la fin et ajoutez le jeton.
Voilà donc une chose.
Maintenant, dans les commandes, c'est une chose similaire, là pour aller chercher, nous n'en avons pas besoin mais pour ajouter nous le faisons
parce que l'ajout est une opération d'écriture.
Donc là, on obtient l'état si on veut, on peut en extraire le token avec la même approche qu'avant et
on peut l'ajouter ça et là, on aura en fait aussi besoin de userId bientôt, donc on prendra soin à ce sujet dans la
prochaine conférence, mais pour l'instant,
assurez-vous simplement d'ajouter le jeton partout et voyons maintenant
comment nous pouvons également nous assurer que les commandes appartiennent réellement à notre utilisateur.