1 00:00:02,110 --> 00:00:07,300 Donc, pour m'assurer que nous sommes déconnectés à l'expiration du jeton, j'ajouterai une nouvelle fonction dans 2 00:00:07,300 --> 00:00:08,150 notre action 3 00:00:08,160 --> 00:00:13,270 d'authentification, donc dans le dossier actions de l'authentification. fichier js, je vais ajouter une nouvelle fonction ici 4 00:00:13,270 --> 00:00:20,950 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 5 00:00:21,220 --> 00:00:21,840 et 6 00:00:21,880 --> 00:00:31,410 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 7 00:00:31,410 --> 00:00:38,630 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 8 00:00:38,630 --> 00:00:43,280 juste une hypothèse que j'ai et nous devons nous assurer que nous transmettons 9 00:00:43,280 --> 00:00:47,530 les données en millisecondes par conséquent. Par la suite, cette 10 00:00:47,540 --> 00:00:55,480 fonction s'exécutera ici une fois le jeton expiré et là, la question est maintenant que faisons-nous là-bas? 11 00:00:56,060 --> 00:00:57,890 Eh bien à la fin, je veux envoyer 12 00:00:57,900 --> 00:00:58,980 la déconnexion ici, non? 13 00:00:58,980 --> 00:01:05,490 Donc, définir le minuteur de déconnexion ne devrait probablement pas être une fonction normale, mais en fait ici, j'aurai 14 00:01:06,120 --> 00:01:10,370 une fonction qui tire parti de Redux Thunk, alors où nous avons 15 00:01:10,590 --> 00:01:16,680 cette fonction dans une fonction où cette fonction interne est envoyée comme argument et donc une fois 16 00:01:17,400 --> 00:01:20,010 cette tâche asynchrone terminée, une fois ce temporisateur 17 00:01:20,010 --> 00:01:27,660 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 à 18 00:01:27,660 --> 00:01:29,510 la fin, de sorte 19 00:01:29,670 --> 00:01:32,890 que cela se produise lorsque le temporisateur est terminé. 20 00:01:32,910 --> 00:01:38,670 Maintenant, lorsque nous nous déconnectons, je veux également effacer tous les temporisateurs en cours d'exécution, car nous 21 00:01:38,670 --> 00:01:45,760 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 22 00:01:45,760 --> 00:01:49,110 temporisateur lorsque nous nous déconnectons manuellement afin que Je n'ai 23 00:01:49,120 --> 00:01:55,670 pas ce minuteur en cours même s'il est redondant. Nous pouvons donc ajouter une nouvelle variable peut-être 24 00:01:55,670 --> 00:02:02,340 en haut du fichier ici que je nommerai temporisateur qui n'est pas initialisé initialement, puis ici lorsque nous 25 00:02:02,340 --> 00:02:08,760 définirons un temporisateur, je définirai le résultat du délai d'expiration défini sur le temporisateur ou stockera le 26 00:02:08,850 --> 00:02:12,860 résultat de cette dans timer qui est un pointeur sur ce 27 00:02:12,860 --> 00:02:21,920 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 28 00:02:21,950 --> 00:02:29,510 interne de répartition mais une fonction normale où j'appelle simplement clear timeout timer et le timer est cette variable qui pointe 29 00:02:29,510 --> 00:02:30,800 vers le timer. 30 00:02:30,800 --> 00:02:36,080 Je veux juste vérifier si la minuterie existe, si elle n'est pas indéfinie et si elle n'est pas 31 00:02:36,080 --> 00:02:41,620 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. 32 00:02:41,840 --> 00:02:43,290 Donc, avec cela, nous 33 00:02:43,290 --> 00:02:47,770 pouvons effacer la minuterie si nous n'en avons plus besoin et je veux m'en 34 00:02:47,810 --> 00:02:56,540 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 35 00:02:56,540 --> 00:03:00,650 faire quand Je me déconnecte, bien sûr, j'ai besoin d'effacer mon stockage asynchrone. 36 00:03:00,650 --> 00:03:09,760 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 37 00:03:09,760 --> 00:03:10,470 les données. 38 00:03:10,540 --> 00:03:12,550 J'ai donc utilisé des données utilisateur 39 00:03:12,550 --> 00:03:18,010 là-bas, je dois utiliser le même identifiant pour les effacer. Maintenant, supprimer l'élément renvoie une promesse et 40 00:03:18,010 --> 00:03:18,680 nous 41 00:03:18,730 --> 00:03:25,080 pourrions attendre cela, dans ce cas, nous aurions besoin de retourner cette syntaxe interne où nous obtenons la 42 00:03:25,090 --> 00:03:31,600 répartition et nous faisons notre tâche asynchrone, nous déplaçons donc ce code ici dans cela et ensuite ici 43 00:03:31,670 --> 00:03:33,380 nous pouvons distribuer ce action. 44 00:03:33,380 --> 00:03:36,500 Nous pourrions faire tout cela si nous sommes intéressés par le 45 00:03:36,500 --> 00:03:41,970 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 46 00:03:42,140 --> 00:03:48,560 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. 47 00:03:48,590 --> 00:03:51,440 Maintenant, bien sûr, vous pouvez restructurer cela, mais c'est comme ça que 48 00:03:51,440 --> 00:03:57,380 je vais le faire, cela devrait supprimer les données de notre stockage local. Donc, avec cela, la déconnexion fait cela, nous avons 49 00:03:57,380 --> 00:04:03,450 la fonction de minuterie de déconnexion qui définit une minuterie qui se déconnecte une fois que cela expire, maintenant nous devons 50 00:04:03,450 --> 00:04:07,920 simplement nous assurer que nous envoyons ce créateur d'action de minuterie de déconnexion défini ici, que 51 00:04:07,920 --> 00:04:15,510 nous utilisons ce créateur d'action et Je veux l'utiliser lorsque nous nous authentifions. Nous avons donc cette action 52 00:04:15,510 --> 00:04:22,630 d'authentification ici et là à la fin, je dois envoyer un minuteur 53 00:04:22,800 --> 00:04:30,770 de déconnexion défini ainsi que ceci ici. Donc là, je vais maintenant utiliser cette syntaxe différente 54 00:04:30,770 --> 00:04:37,280 où nous avons obtenu cette fonction interne qui reçoit la répartition, de sorte qu'ici je peux répartir 55 00:04:37,760 --> 00:04:42,940 le minuteur de déconnexion afin que cela ici soit déclenché et bien sûr cela 56 00:04:45,740 --> 00:04:51,590 signifie également qu'ici au lieu de retourner cela, nous doivent également envoyer cela, nous envoyons 57 00:04:51,590 --> 00:04:59,970 donc deux actions ici, ce qui est tout à fait correct. J'ai donc réglé ma minuterie et j'envoie 58 00:05:00,390 --> 00:05:02,270 ensuite l'action d'authentification. 59 00:05:02,290 --> 00:05:08,890 Maintenant, bien sûr, le temporisateur de déconnexion doit savoir combien de temps cela devrait prendre, le temps d'expiration 60 00:05:08,890 --> 00:05:17,110 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 61 00:05:17,110 --> 00:05:20,920 puisse le transmettre ici à ma minuterie de déconnexion. 62 00:05:20,920 --> 00:05:27,400 Cela signifie que chaque endroit où nous envoyons l'action d'authentification ou où nous utilisons ce créateur d'action, je dois dire, 63 00:05:27,400 --> 00:05:33,100 que chaque endroit où nous faisons cela n'a pas seulement besoin de fournir l'ID utilisateur et le jeton, 64 00:05:33,280 --> 00:05:35,230 mais aussi l'heure d'expiration et cela 65 00:05:35,470 --> 00:05:38,580 commence ici avec s'inscrire. Lorsque nous nous 66 00:05:38,590 --> 00:05:46,800 inscrivons, nous avons notre date d'expiration ici et nous expédions authentifier. L'authentification a également besoin de l'heure 67 00:05:46,800 --> 00:05:47,670 d'expiration. 68 00:05:47,670 --> 00:05:52,440 Maintenant, la bonne chose est ici, il est très facile de savoir quand cela expire 69 00:05:52,440 --> 00:05:58,730 parce que nous l'avons dans les données de réponse, nous avons cela expire dans le champ qui est bien 70 00:05:58,830 --> 00:06:07,970 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 à 71 00:06:07,970 --> 00:06:11,480 des valeurs en millisecondes, donc je vais multiplier cela 72 00:06:11,690 --> 00:06:19,540 par 1000 et je vais également l'ajouter dans la connexion bien sûr. Là, j'ajouterai également que comme troisième argument 73 00:06:19,580 --> 00:06:23,890 ici afin que pour la connexion lorsque 74 00:06:24,110 --> 00:06:31,490 nous envoyons cette action d'authentification, nous transmettions également notre délai d'expiration que nous 75 00:06:31,490 --> 00:06:36,520 récupérons de Firebase. Maintenant, nous avons également un autre endroit où nous 76 00:06:36,530 --> 00:06:38,660 devons le faire et c'est l'écran de 77 00:06:38,660 --> 00:06:45,740 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 78 00:06:45,950 --> 00:06:47,410 l'application, donc ici, nous 79 00:06:47,420 --> 00:06:51,080 ne savons pas combien de temps il faudra pour que le jeton 80 00:06:51,080 --> 00:06:53,100 expire et nous devons le calculer. 81 00:06:53,150 --> 00:07:02,060 Donc, ici, je peux calculer l'heure d'expiration en prenant essentiellement la date d'expiration qui est un objet de date et 82 00:07:02,060 --> 00:07:08,090 en appelant get time dessus qui me donne son horodatage en millisecondes depuis le 83 00:07:08,090 --> 00:07:09,070 début de 84 00:07:09,800 --> 00:07:14,940 l'heure et de cela je dois déduire l'heure d'horodatage actuelle, donc 85 00:07:15,020 --> 00:07:18,820 l'horodatage actuel en millisecondes. Ce sera dans le futur, c'est 86 00:07:18,830 --> 00:07:19,850 maintenant donc 87 00:07:19,850 --> 00:07:24,810 la différence devrait être un nombre positif parce que je vérifie que c'est dans le 88 00:07:24,830 --> 00:07:28,280 futur ici, donc ça devrait être un nombre positif en millisecondes. 89 00:07:28,310 --> 00:07:35,060 Alors maintenant, le délai d'expiration ici peut être transmis pour s'authentifier et avec cela, nous devrions également avoir la 90 00:07:35,330 --> 00:07:36,110 déconnexion automatique. 91 00:07:37,790 --> 00:07:39,450 Maintenant pour 92 00:07:39,470 --> 00:07:46,440 valider que cela fonctionne, passons à l'authentification. fichier js et en fait là, dans la fonction de minuterie de 93 00:07:46,560 --> 00:07:53,350 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 94 00:07:53,370 --> 00:07:54,960 en secondes et cela 95 00:07:54,960 --> 00:07:57,320 signifie que nous devons être instantanément déconnectés maintenant. 96 00:07:59,410 --> 00:08:06,940 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é 97 00:08:06,940 --> 00:08:12,830 et maintenant depuis que j'ai divisé la valeur par 1000, je 98 00:08:12,830 --> 00:08:21,370 devrais être déconnecté après 3. 6 secondes mais je ne le suis pas. Je peux naviguer mais si 99 00:08:22,390 --> 00:08:30,720 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 100 00:08:30,720 --> 00:08:31,530 fait revenir 101 00:08:31,920 --> 00:08:37,710 à l'écran d'authentification et la raison en est que nous ne demandons jamais à React Native de nous ramener à l'écran 102 00:08:37,740 --> 00:08:39,250 d'authentification, c'est donc la pièce manquante. 103 00:08:39,270 --> 00:08:45,300 Effacer notre magasin Redux est bien, mais en réaction à cet espace, nous devons nous 104 00:08:45,300 --> 00:08:52,090 assurer que nous revenons à l'écran d'authentification. Pour nous assurer que cela se produit, nous avons besoin d'un endroit qui 105 00:08:52,090 --> 00:08:59,230 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 106 00:08:59,230 --> 00:09:06,480 se produit, nous pouvons revenir à la écran d'authentification. Ce serait maintenant l'application. fichier js parce que cela enveloppe 107 00:09:06,490 --> 00:09:08,100 tout, mais le 108 00:09:08,110 --> 00:09:14,080 problème est là, j'ai configuré Redux ici. Donc, Redux dans mon magasin est uniquement disponible à 109 00:09:14,080 --> 00:09:19,960 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 110 00:09:19,960 --> 00:09:21,000 pas d'accès direct. 111 00:09:21,100 --> 00:09:28,700 La solution consiste à simplement envelopper cela avec un autre composant. Je vais créer cela dans le dossier de 112 00:09:29,090 --> 00:09:33,120 navigation parce que je vais l'appeler conteneur de navigation. 113 00:09:33,140 --> 00:09:37,690 Maintenant, c'est un composant React normal, comme celui-ci, où je n'ai besoin 114 00:09:38,820 --> 00:09:46,650 de rien de React Native mais où je viens de configurer mon composant de conteneur de navigation où je reçois des accessoires 115 00:09:46,650 --> 00:09:52,980 et retourne quelques jsx à la fin et l'exporte en tant que conteneur de navigation par défaut. 116 00:09:54,380 --> 00:10:02,810 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 117 00:10:02,810 --> 00:10:06,230 le même dossier et ce sera ce que je reviendrai 118 00:10:06,410 --> 00:10:15,110 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 119 00:10:15,110 --> 00:10:24,190 le navigateur de boutique ici, j'importe mon conteneur de navigation à partir du dossier de navigation et du fichier de conteneur de 120 00:10:24,230 --> 00:10:29,980 navigation et j'utilise le conteneur de navigation ici au lieu du navigateur de boutique. 121 00:10:29,990 --> 00:10:34,670 Maintenant, c'est simplement un wrapper autour du navigateur de la boutique, mais comme il est à l'intérieur du 122 00:10:34,670 --> 00:10:36,410 fournisseur, j'ai maintenant accès à Redux. 123 00:10:36,440 --> 00:10:46,150 Donc ici, nous pouvons importer le sélecteur d'utilisation de React Redux et l'utiliser ici pour puiser dans Redux. 124 00:10:46,190 --> 00:10:54,320 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 125 00:10:55,010 --> 00:11:00,410 ensuite je peux accéder à l'état. auth. jeton pour accéder au jeton 126 00:11:00,410 --> 00:11:06,980 dans ma tranche d'état d'authentification et utiliser l'opérateur double coup pour forcer essentiellement à ce que ce soit vrai ou faux 127 00:11:06,980 --> 00:11:12,620 et si nous n'avons pas de jeton, ce sera faux, donc isAuth sera faux dans ce cas, si 128 00:11:12,620 --> 00:11:15,460 nous avons un jeton ce sera vrai, donc isAuth 129 00:11:15,500 --> 00:11:23,780 est vrai si nous avons un jeton qui a du sens, je suppose. Maintenant, nous pouvons utiliser l'effet ici pour réagir 130 00:11:23,780 --> 00:11:25,060 aux changements. 131 00:11:25,160 --> 00:11:29,480 Donc, ici en effet, mon tableau de dépendances inclut isAuth, donc quand isAuth 132 00:11:29,480 --> 00:11:37,270 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 133 00:11:37,270 --> 00:11:39,630 je me soucie, si isAuth n'est 134 00:11:39,670 --> 00:11:45,910 pas vrai , si c'est vrai, je m'en fiche mais si ce n'est pas vrai, alors je veux naviguer 135 00:11:45,910 --> 00:11:49,220 vers l'écran d'authentification et maintenant nous avons un autre problème. 136 00:11:49,390 --> 00:11:55,930 Le navigateur est ici et seulement dans les composants qui sont rendus à l'aide du navigateur, nous 137 00:11:55,930 --> 00:12:03,220 avons accès aux accessoires. la navigation. naviguez mais heureusement, React navigation nous donne une trappe d'évasion. Nous pouvons utiliser 138 00:12:03,220 --> 00:12:08,770 une référence pour accéder à la fonctionnalité de navigation à l'aide de 139 00:12:08,770 --> 00:12:17,550 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 140 00:12:17,610 --> 00:12:20,610 et nous créons simplement notre référence nav ici en appelant 141 00:12:21,270 --> 00:12:27,070 use ref comme ceci et vous devriez être au courant des références dans React qui est fondamentalement un moyen 142 00:12:27,070 --> 00:12:34,890 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 143 00:12:34,910 --> 00:12:37,450 et l'assigner à nav ref ou l'inverse. 144 00:12:37,470 --> 00:12:43,020 Donc, cela établit une connexion entre la constante nav ref et cet élément qui est finalement rendu ici et 145 00:12:43,020 --> 00:12:49,610 maintenant avec ceci ici dans l'effet, nous pouvons appeler navRef. actuel, c'est comme ça que les 146 00:12:49,630 --> 00:12:50,830 refs 147 00:12:50,830 --> 00:12:59,660 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 148 00:12:59,660 --> 00:13:05,420 que le conteneur de la boutique n'est rien d'autre que ce que ShopNavigator. js exports qui est un tel composant de 149 00:13:05,420 --> 00:13:11,010 conteneur d'application et ce composant a une méthode de répartition que nous pouvons utiliser pour 150 00:13:11,010 --> 00:13:15,110 distribuer une action de navigation. Pour cela, nous 151 00:13:15,110 --> 00:13:24,650 devons maintenant importer quelque chose de la navigation React et que quelque chose est l'objet d'actions de navigation ici 152 00:13:24,650 --> 00:13:29,720 et là, nous appelons NavigationActions. naviguer et maintenant 153 00:13:29,900 --> 00:13:36,620 cela nous permet de naviguer. Cependant, pas avec auth comme celui-ci, mais cela nécessite un 154 00:13:36,620 --> 00:13:41,950 objet comme argument où vous configurez le nom de la route et cela peut maintenant être auth. 155 00:13:41,960 --> 00:13:47,270 Voilà donc comment nous pouvons désormais naviguer depuis l'intérieur de ce composant même s'il est en dehors du navigateur. 156 00:13:49,080 --> 00:13:56,610 Donc, cela passe à l'authentification chaque fois que notre état isAuth passe à non authentifié, cela signifie également que dans le navigateur de 157 00:13:56,610 --> 00:14:03,320 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, 158 00:14:03,340 --> 00:14:08,670 si nous envoyons cette action , nous effaçons le jeton dans Redux et donc cela devrait 159 00:14:08,670 --> 00:14:12,390 déclencher automatiquement notre navigation grâce à ce conteneur de navigation 160 00:14:12,660 --> 00:14:18,140 et donc maintenant si nous l'enregistrons, nous devrions naviguer vers auth lorsque le jeton n'est pas valide. 161 00:14:18,140 --> 00:14:25,530 Alors maintenant, si je me reconnecte, après 3. 6 secondes, nous devons être déconnectés et nous devons voir 162 00:14:25,530 --> 00:14:26,800 que nous sommes 163 00:14:26,850 --> 00:14:28,690 déconnectés, oui, cela semble bon. 164 00:14:28,890 --> 00:14:30,780 Réessayons ici, oui, 165 00:14:36,990 --> 00:14:45,490 revenons en arrière et essayons également la déconnexion manuelle. 166 00:14:45,530 --> 00:14:47,340 Donc, si je me connecte, ouvrez-le, cliquez sur déconnexion, cela fonctionne également. 167 00:14:47,410 --> 00:14:50,900 Donc, avec cela, nous avons intégré la fonctionnalité de déconnexion 168 00:14:50,950 --> 00:14:57,580 automatique, revenons maintenant au fichier d'action d'authentification et supprimons cette division factice ici parce que je l'ai fait uniquement pour 169 00:14:57,580 --> 00:15:02,020 les tests, bien sûr, je ne veux pas raccourcir manuellement mon délai d'expiration 170 00:15:02,020 --> 00:15:08,980 , au lieu de cela, nous avons maintenant ici une fonctionnalité qui fonctionne et qui garantit que peu importe si nous 171 00:15:09,160 --> 00:15:16,210 nous inscrivons ou que nous nous connectons ou quoi que nous fassions, nous avons un jeton que nous stockons, que nous pouvons 172 00:15:16,210 --> 00:15:21,660 utiliser et nous veillons à ce que nous soyons également déconnectés automatiquement si notre jeton expire. 173 00:15:21,700 --> 00:15:24,010 Ceci est l'application terminée ici.