Donc, pour m'assurer que nous sommes déconnectés à l'expiration du jeton, j'ajouterai une nouvelle fonction dans
notre action
d'authentification, donc dans le dossier actions de l'authentification. fichier js, je vais ajouter une nouvelle fonction ici
où je veux définir une minuterie qui expire essentiellement lorsque le jeton est expiré. Ainsi, nous pouvons appeler ce minuteur de déconnexion défini par exemple
et
là, je m'attends à obtenir le délai d'expiration et ici, nous pouvons utiliser le bon ancien délai d'expiration pris en charge par React Native dans sa version
Javascript pour définir un minuteur qui expire après ce délai et disons que c'est une valeur en millisecondes, donc c'est
juste une hypothèse que j'ai et nous devons nous assurer que nous transmettons
les données en millisecondes par conséquent. Par la suite, cette
fonction s'exécutera ici une fois le jeton expiré et là, la question est maintenant que faisons-nous là-bas?
Eh bien à la fin, je veux envoyer
la déconnexion ici, non?
Donc, définir le minuteur de déconnexion ne devrait probablement pas être une fonction normale, mais en fait ici, j'aurai
une fonction qui tire parti de Redux Thunk, alors où nous avons
cette fonction dans une fonction où cette fonction interne est envoyée comme argument et donc une fois
cette tâche asynchrone terminée, une fois ce temporisateur
expiré, nous pouvons distribuer la déconnexion, afin que nous puissions distribuer le résultat de ce créateur d'action qui est cette action à
la fin, de sorte
que cela se produise lorsque le temporisateur est terminé.
Maintenant, lorsque nous nous déconnectons, je veux également effacer tous les temporisateurs en cours d'exécution, car nous
avons peut-être défini ce temporisateur automatiquement que nous ne définissons pas encore mais nous le ferons bientôt, alors je veux effacer ce
temporisateur lorsque nous nous déconnectons manuellement afin que Je n'ai
pas ce minuteur en cours même s'il est redondant. Nous pouvons donc ajouter une nouvelle variable peut-être
en haut du fichier ici que je nommerai temporisateur qui n'est pas initialisé initialement, puis ici lorsque nous
définirons un temporisateur, je définirai le résultat du délai d'expiration défini sur le temporisateur ou stockera le
résultat de cette dans timer qui est un pointeur sur ce
timer et ajoute une nouvelle fonction, peut-être ici, clear timer de déconnexion qui est maintenant une fonction normale, pas une fonction qui obtient cette fonction
interne de répartition mais une fonction normale où j'appelle simplement clear timeout timer et le timer est cette variable qui pointe
vers le timer.
Je veux juste vérifier si la minuterie existe, si elle n'est pas indéfinie et si elle n'est pas
indéfinie, je l'appellerai, le timeout clair est une fonction intégrée intégrée à Javascript pour se débarrasser de cette minuterie.
Donc, avec cela, nous
pouvons effacer la minuterie si nous n'en avons plus besoin et je veux m'en
débarrasser chaque fois que nous nous déconnectons, donc chaque fois que cela se produit ici, j'appellerai effacer la minuterie de déconnexion et une autre chose que je dois
faire quand Je me déconnecte, bien sûr, j'ai besoin d'effacer mon stockage asynchrone.
Donc, ici, je peux appeler le stockage asynchrone supprimer les données utilisateur de l'élément, en utilisant à nouveau le même identifiant que j'ai utilisé pour stocker
les données.
J'ai donc utilisé des données utilisateur
là-bas, je dois utiliser le même identifiant pour les effacer. Maintenant, supprimer l'élément renvoie une promesse et
nous
pourrions attendre cela, dans ce cas, nous aurions besoin de retourner cette syntaxe interne où nous obtenons la
répartition et nous faisons notre tâche asynchrone, nous déplaçons donc ce code ici dans cela et ensuite ici
nous pouvons distribuer ce action.
Nous pourrions faire tout cela si nous sommes intéressés par le
résultat de la suppression de l'élément mais ici je ne suis pas intéressé, je vais simplement déclencher ceci et je
n'attends pas que cette promesse se termine, au lieu de cela je retourne immédiatement ce nouvel objet d'action et j'espère que cela se terminera.
Maintenant, bien sûr, vous pouvez restructurer cela, mais c'est comme ça que
je vais le faire, cela devrait supprimer les données de notre stockage local. Donc, avec cela, la déconnexion fait cela, nous avons
la fonction de minuterie de déconnexion qui définit une minuterie qui se déconnecte une fois que cela expire, maintenant nous devons
simplement nous assurer que nous envoyons ce créateur d'action de minuterie de déconnexion défini ici, que
nous utilisons ce créateur d'action et Je veux l'utiliser lorsque nous nous authentifions. Nous avons donc cette action
d'authentification ici et là à la fin, je dois envoyer un minuteur
de déconnexion défini ainsi que ceci ici. Donc là, je vais maintenant utiliser cette syntaxe différente
où nous avons obtenu cette fonction interne qui reçoit la répartition, de sorte qu'ici je peux répartir
le minuteur de déconnexion afin que cela ici soit déclenché et bien sûr cela
signifie également qu'ici au lieu de retourner cela, nous doivent également envoyer cela, nous envoyons
donc deux actions ici, ce qui est tout à fait correct. J'ai donc réglé ma minuterie et j'envoie
ensuite l'action d'authentification.
Maintenant, bien sûr, le temporisateur de déconnexion doit savoir combien de temps cela devrait prendre, le temps d'expiration
est requis et je m'attends à l'obtenir, cette heure d'expiration juste pour mélanger les noms, comme argument ici dans l'authentification pour que je
puisse le transmettre ici à ma minuterie de déconnexion.
Cela signifie que chaque endroit où nous envoyons l'action d'authentification ou où nous utilisons ce créateur d'action, je dois dire,
que chaque endroit où nous faisons cela n'a pas seulement besoin de fournir l'ID utilisateur et le jeton,
mais aussi l'heure d'expiration et cela
commence ici avec s'inscrire. Lorsque nous nous
inscrivons, nous avons notre date d'expiration ici et nous expédions authentifier. L'authentification a également besoin de l'heure
d'expiration.
Maintenant, la bonne chose est ici, il est très facile de savoir quand cela expire
parce que nous l'avons dans les données de réponse, nous avons cela expire dans le champ qui est bien
sûr une chaîne, donc avec parseInt, nous pouvons convertir cela en nombre et puis ce sera en quelques secondes, authentifier et définir le temporisateur de déconnexion s'attendre à
des valeurs en millisecondes, donc je vais multiplier cela
par 1000 et je vais également l'ajouter dans la connexion bien sûr. Là, j'ajouterai également que comme troisième argument
ici afin que pour la connexion lorsque
nous envoyons cette action d'authentification, nous transmettions également notre délai d'expiration que nous
récupérons de Firebase. Maintenant, nous avons également un autre endroit où nous
devons le faire et c'est l'écran de
démarrage, car là, nous envoyons également authentifier et ici, nous devons calculer le temps restant, car cela se déclenche chaque fois que nous redémarrons
l'application, donc ici, nous
ne savons pas combien de temps il faudra pour que le jeton
expire et nous devons le calculer.
Donc, ici, je peux calculer l'heure d'expiration en prenant essentiellement la date d'expiration qui est un objet de date et
en appelant get time dessus qui me donne son horodatage en millisecondes depuis le
début de
l'heure et de cela je dois déduire l'heure d'horodatage actuelle, donc
l'horodatage actuel en millisecondes. Ce sera dans le futur, c'est
maintenant donc
la différence devrait être un nombre positif parce que je vérifie que c'est dans le
futur ici, donc ça devrait être un nombre positif en millisecondes.
Alors maintenant, le délai d'expiration ici peut être transmis pour s'authentifier et avec cela, nous devrions également avoir la
déconnexion automatique.
Maintenant pour
valider que cela fonctionne, passons à l'authentification. fichier js et en fait là, dans la fonction de minuterie de
déconnexion, je divise temporairement le temps d'expiration par 1000, ce qui signifie que je divise les millisecondes par 1000, ce qui les transforme
en secondes et cela
signifie que nous devons être instantanément déconnectés maintenant.
Si je recharge, je suis déconnecté mais vous remarquerez bientôt qu'il n'y a que des travaux théoriques. Si je me reconnecte, je suis connecté
et maintenant depuis que j'ai divisé la valeur par 1000, je
devrais être déconnecté après 3. 6 secondes mais je ne le suis pas. Je peux naviguer mais si
je recharge, en effet maintenant je suis déconnecté. Donc, cela a en quelque sorte nettoyé les données mais cela ne nous a pas
fait revenir
à l'écran d'authentification et la raison en est que nous ne demandons jamais à React Native de nous ramener à l'écran
d'authentification, c'est donc la pièce manquante.
Effacer notre magasin Redux est bien, mais en réaction à cet espace, nous devons nous
assurer que nous revenons à l'écran d'authentification. Pour nous assurer que cela se produit, nous avons besoin d'un endroit qui
est toujours rendu et qui enveloppe toute notre application où nous pouvons écouter notre magasin Redux et savoir quand notre jeton est réinitialisé à null afin que si cela
se produit, nous pouvons revenir à la écran d'authentification. Ce serait maintenant l'application. fichier js parce que cela enveloppe
tout, mais le
problème est là, j'ai configuré Redux ici. Donc, Redux dans mon magasin est uniquement disponible à
l'intérieur d'ici, donc dans les composants enfants imbriqués et c'est déjà mon composant de navigateur auquel je n'ai
pas d'accès direct.
La solution consiste à simplement envelopper cela avec un autre composant. Je vais créer cela dans le dossier de
navigation parce que je vais l'appeler conteneur de navigation.
Maintenant, c'est un composant React normal, comme celui-ci, où je n'ai besoin
de rien de React Native mais où je viens de configurer mon composant de conteneur de navigation où je reçois des accessoires
et retourne quelques jsx à la fin et l'exporte en tant que conteneur de navigation par défaut.
Maintenant, là-dedans, je veux configurer ma navigation, donc je vais importer le navigateur de boutique à partir du navigateur de boutique qui se trouve dans
le même dossier et ce sera ce que je reviendrai
ici, mon navigateur de boutique comme celui-ci. Maintenant, je peux utiliser mon conteneur de navigation ici dans l'application. fichier js, donc au lieu d'importer
le navigateur de boutique ici, j'importe mon conteneur de navigation à partir du dossier de navigation et du fichier de conteneur de
navigation et j'utilise le conteneur de navigation ici au lieu du navigateur de boutique.
Maintenant, c'est simplement un wrapper autour du navigateur de la boutique, mais comme il est à l'intérieur du
fournisseur, j'ai maintenant accès à Redux.
Donc ici, nous pouvons importer le sélecteur d'utilisation de React Redux et l'utiliser ici pour puiser dans Redux.
Donc ici dans le conteneur de navigation, je peux simplement accéder à isAuth, disons en utilisant le sélecteur d'utilisation qui prend cette fonction qui me donne accès à l'état Redux et
ensuite je peux accéder à l'état. auth. jeton pour accéder au jeton
dans ma tranche d'état d'authentification et utiliser l'opérateur double coup pour forcer essentiellement à ce que ce soit vrai ou faux
et si nous n'avons pas de jeton, ce sera faux, donc isAuth sera faux dans ce cas, si
nous avons un jeton ce sera vrai, donc isAuth
est vrai si nous avons un jeton qui a du sens, je suppose. Maintenant, nous pouvons utiliser l'effet ici pour réagir
aux changements.
Donc, ici en effet, mon tableau de dépendances inclut isAuth, donc quand isAuth
change, cette fonction d'effet devrait s'exécuter et donc ici, je peux ensuite vérifier si nous ne sommes pas authentifiés parce que c'est ce dont
je me soucie, si isAuth n'est
pas vrai , si c'est vrai, je m'en fiche mais si ce n'est pas vrai, alors je veux naviguer
vers l'écran d'authentification et maintenant nous avons un autre problème.
Le navigateur est ici et seulement dans les composants qui sont rendus à l'aide du navigateur, nous
avons accès aux accessoires. la navigation. naviguez mais heureusement, React navigation nous donne une trappe d'évasion. Nous pouvons utiliser
une référence pour accéder à la fonctionnalité de navigation à l'aide de
ce composant lorsque nous l'utilisons dans notre code jsx. Nous pouvons créer une telle référence avec use ref avec le crochet use ref
et nous créons simplement notre référence nav ici en appelant
use ref comme ceci et vous devriez être au courant des références dans React qui est fondamentalement un moyen
pour vous d'accéder directement à un élément que vous rendre en jsx et maintenant nous pouvons ajouter la propriété ref au navigateur de la boutique
et l'assigner à nav ref ou l'inverse.
Donc, cela établit une connexion entre la constante nav ref et cet élément qui est finalement rendu ici et
maintenant avec ceci ici dans l'effet, nous pouvons appeler navRef. actuel, c'est comme ça que les
refs
fonctionnent, ils ont une répartition de propriété actuelle. L'envoi est une méthode mise à disposition par le navigateur de la boutique ou par ce conteneur d'application qui est finalement parce
que le conteneur de la boutique n'est rien d'autre que ce que ShopNavigator. js exports qui est un tel composant de
conteneur d'application et ce composant a une méthode de répartition que nous pouvons utiliser pour
distribuer une action de navigation. Pour cela, nous
devons maintenant importer quelque chose de la navigation React et que quelque chose est l'objet d'actions de navigation ici
et là, nous appelons NavigationActions. naviguer et maintenant
cela nous permet de naviguer. Cependant, pas avec auth comme celui-ci, mais cela nécessite un
objet comme argument où vous configurez le nom de la route et cela peut maintenant être auth.
Voilà donc comment nous pouvons désormais naviguer depuis l'intérieur de ce composant même s'il est en dehors du navigateur.
Donc, cela passe à l'authentification chaque fois que notre état isAuth passe à non authentifié, cela signifie également que dans le navigateur de
la boutique, dans notre bouton de déconnexion, nous n'avons pas besoin de naviguer ici parce que si nous déclenchons la déconnexion,
si nous envoyons cette action , nous effaçons le jeton dans Redux et donc cela devrait
déclencher automatiquement notre navigation grâce à ce conteneur de navigation
et donc maintenant si nous l'enregistrons, nous devrions naviguer vers auth lorsque le jeton n'est pas valide.
Alors maintenant, si je me reconnecte, après 3. 6 secondes, nous devons être déconnectés et nous devons voir
que nous sommes
déconnectés, oui, cela semble bon.
Réessayons ici, oui,
revenons en arrière et essayons également la déconnexion manuelle.
Donc, si je me connecte, ouvrez-le, cliquez sur déconnexion, cela fonctionne également.
Donc, avec cela, nous avons intégré la fonctionnalité de déconnexion
automatique, revenons maintenant au fichier d'action d'authentification et supprimons cette division factice ici parce que je l'ai fait uniquement pour
les tests, bien sûr, je ne veux pas raccourcir manuellement mon délai d'expiration
, au lieu de cela, nous avons maintenant ici une fonctionnalité qui fonctionne et qui garantit que peu importe si nous
nous inscrivons ou que nous nous connectons ou quoi que nous fassions, nous avons un jeton que nous stockons, que nous pouvons
utiliser et nous veillons à ce que nous soyons également déconnectés automatiquement si notre jeton expire.
Ceci est l'application terminée ici.