Nous avons donc accompli
beaucoup de choses, nous sommes en mesure d'écrire
des données, de récupérer des données, d'utiliser notre jeton pour délimiter
les données ou pour définir les produits et les commandes pour
notre utilisateur actuellement connecté, nous pouvons nous
connecter, etc., et c'est très bien.
Une chose que nous ne faisons pas en ce moment, c'est que nous ne persistons
pas pour ainsi dire. Si je recharge, je dois toujours
me connecter à
nouveau et ce n'est pas vraiment ce que je veux, ce serait bien si nous pouvions nous connecter automatiquement
si nous avons un jeton valide et pour cela, nous devons faire deux choses - nous devons stocker le jeton quelque part sur l'appareil,
pas dans Redux car Redux est en mémoire et cela sera perdu au redémarrage de l'application.
Il doit donc être quelque part sur le
disque dur de l'appareil pour ainsi dire et en plus, nous devons vérifier ce stockage chaque fois que notre application démarre et définir automatiquement
le jeton dans Redux et rediriger l'utilisateur si nous trouvons un jeton valide là-bas.
Commençons maintenant par le stockage car c'est une première étape logique. Pour stocker, nous devons importer quelque
chose ici dans le, pas dans le créateur d'action
des produits mais en fait ici dans le créateur d'action d'authentification, là vous devez importer le stockage asynchrone de React Native.
Une fois importé,
nous pouvons l'utiliser pour ensuite enregistrer les données sur l'appareil, le stockage asynchrone est une API React Native qui, à la fin, utilise un stockage de
valeurs clés sur l'appareil qui est disponible à la fois sur iOS et Android où nous pouvons stocker des
données qui persistent à travers les relances d'applications, afin que nous puissions utiliser pour enregistrer des données qui ne sont
pas perdues lorsque l'application démarre ou redémarre.
Je vais donc ajouter une nouvelle fonction, enregistrer des données dans le stockage ou quelque chose comme ça
et là, je m'attends à obtenir mon jeton et mon ID utilisateur, les deux données qui m'intéressent ici et nous pouvons maintenant utiliser le
stockage asynchrone à ce moment-là définir un élément qui est la façon dont vous enregistrez les données et cet élément que vous définissez doit être une chaîne, mais tout d'abord,
vous devez définir une clé et je vais
lui donner le nom de données utilisateur, mais cela dépend de
vous, vous aurez besoin de cette clé plus tard pour récupérer vos données et
la deuxième valeur est maintenant
une chaîne, donc la chaîne que vous souhaitez enregistrer là-bas et vous devez enregistrer une chaîne essentiellement.
Maintenant ce
n'est pas un problème, nous pouvons utiliser json. stringify pour convertir un objet Javascript en chaîne et l'objet que
je veux convertir est un objet qui contient mon jeton que j'obtiens comme argument ici et il contient l'ID utilisateur
que j'obtiens comme argument.
Donc, à la fin, nous enregistrons ensuite cet objet sous forme de chaîne sur l'appareil.
Maintenant, nous avons juste besoin d'appeler les données de sauvegarde vers le stockage chaque fois que nous avons fini de nous connecter ou de nous inscrire, donc ici peut-être après
l'envoi de la connexion, nous pouvons appeler les données de sauvegarde vers le stockage et transférer resData. idToken
et resData. localId, donc les mêmes choses que nous utilisons dans Redux
et nous voulons vraiment les utiliser là-bas parce que Redux est important
pour l'application en cours d'exécution mais je l'enregistre également sur l'appareil lorsque nous voulons le charger au redémarrage de l'application.
Maintenant, cependant, cela ne suffira pas à lui seul et nous devons bien sûr le faire
lors de l'inscription, mais cela ne suffira pas à lui seul, nous aurons besoin d'une information supplémentaire ici avant de continuer.
Tu sais quoi? Nous devons savoir combien de temps le jeton est valide, car
vous ne devez pas oublier qu'il expirera finalement, c'est pourquoi, pour vous connecter et vous inscrire, vous obtenez cette clé expireIn
dans la réponse qui vous indique en secondes combien de temps il faut avant que votre jeton n'est pas valide et Firebase ne
l'acceptera plus.
Nous devons également stocker ces informations, car si nous revenons plus tard, si nous redémarrons l'application après trois heures,
notre jeton est probablement invalide, nous devons donc savoir quand le jeton
sera invalidé afin que nous le vérifions, quand
le l'application redémarre, lorsque nous vérifions si nous avons un jeton, nous savons si ce jeton que
nous pourrions trouver est en fait toujours pertinent ou s'il est déjà invalide et nous avons de toute façon besoin d'un
nouveau jeton, auquel cas nous ne devrions pas connecter automatiquement l'utilisateur.
Je veux donc stocker la date d'expiration
et je vais créer la date d'expiration ici en tant que constante, un nouvel objet de date qui à la
fin devrait prendre la date actuelle et ajouter l'heure d'expiration.
Maintenant, la nouvelle date prend un objet date mais avec get time, nous obtenons l'horodatage actuel en millisecondes depuis le
début de l'heure pour ainsi dire, qui est ici
1970 en Javascript.
C'est donc un montant en millisecondes et à cela, nous pouvons ajouter resData. expire dans.
Il s'agit d'un nombre de secondes, nous devons donc le
convertir en millisecondes et c'est également une chaîne, nous devons donc le convertir en nombre.
Donc, ici, j'ajouterai un plus ici ou simplement analyserai alternativement pour le convertir en entier et ensuite je le multiplierai par 1000
pour le convertir de secondes en millisecondes car obtenir le temps nous donne également des millisecondes.
Maintenant, cela me donne un nouvel horodatage dans le futur, qui est l'heure actuelle plus l'heure
d'expiration et je l'enveloppe dans un autre objet de date pour le convertir à partir d'un énorme
nombre de millisecondes en un objet de date d'horodatage concret. Cette date d'expiration est maintenant ce que nous devons également passer pour enregistrer les
données sur le stockage, donc ici, je m'attends à obtenir également la date d'expiration
et nous devons la joindre ici.
Donc ici je peux nommer cette date d'expiration peut-être pour
mélanger les choses, c'est ma date d'expiration et là je veux appeler cette jolie petite méthode toISOString que nous pouvons appeler sur des
objets de date car cela la convertira en une chaîne dans un format
standardisé qui Je veux économiser.
Maintenant, c'est ce que je veux faire pour m'inscrire également, donc
cela peut être copié là-bas et
c'est ce que je
veux faire là aussi, créer la date d'expiration et l'enregistrer dans le stockage.
Maintenant, nous enregistrons cela dans le stockage, ce qui est bien,
mais nous devons également le vérifier lorsque nous nous connectons. Une bonne façon de le faire est de créer un
nouvel écran et je vais réellement le créer en dehors de mes dossiers existants dans le dossier screens
mais ni dans la boutique ni dans l'utilisateur et je nommerai cet écran de démarrage et vous pouvez le nommer comme vous vouloir.
L'idée est que je montre cet écran pendant que mon application démarre et que je détermine si l'utilisateur est authentifié ou non et ce
sera super rapide,
il est probable que nous
ne verrons même pas cet écran au démarrage de l'application. Maintenant ici, nous créons un composant
React normal en important React de React et là-dedans, j'importe des choses
de React Native, pour être précis, j'ai besoin d'une vue, l'indicateur
d'activité pour montrer un spinner de chargement pendant le démarrage de l'application et aussi feuille de style
et également le stockage asynchrone car ici, je veux également accéder au stockage asynchrone pour savoir
si nous avons un jeton valide ou non.
Donc ici, j'ai ensuite mon composant d'écran de démarrage qui est un composant React normal et l'objet
de feuille de style ici avec Stylesheet. créer et à la fin, nous pouvons exporter cet écran de démarrage comme ceci. Maintenant, dans le composant, je vais simplement
présenter l'indicateur d'activité ici avec une taille grande et une couleur de couleurs. primaire et pour cela, vous devez importer ces couleurs constantes
bien sûr et également attribuer un peu de style ici à la vue et
je vais juste prendre des styles. écran ici que nous pouvons maintenant ajouter à la feuille
de style et qui devrait être
très simple, en fléchir un, justifier le centre de contenu et aligner le centre de l'élément
pour du contenu centré verticalement et horizontalement. Maintenant, bien sûr, les choses vraiment importantes se produisent
au-dessus du code jsx, c'est là que nous devons maintenant vérifier
le stockage asynchrone pour un jeton valide et je peux le faire à l'aide de l'effet d'utilisation qui me
permet d'exécuter une logique ici lorsque ce
composant monté et en effet ici, je n'aurai pas besoin de dépendances car ici à l'intérieur de l'effet d'utilisation, je veux maintenant ajouter une nouvelle fonction que je
nommerai try sign up ou try login est plus approprié et j'utilise la fonction séparée car ici je Je veux utiliser async
attendre ce que je peux faire en créant cette fonction intérieure que je peux maintenant appeler ici, essayez de vous
connecter car
encore une fois, async ici sur cette fonction que vous passez pour utiliser effet ne serait pas
vraiment autorisé et ici, dans essayez de vous connecter, l'objectif
est maintenant de vérifier le stockage asynchrone pour un jeton valide. J'obtiens donc mes données utilisateur ici en accédant à
AsyncStorage. getItem,
puis utilisez la clé que vous avez utilisée pour le stockage.
Donc, dans mon cas, ce sont les données utilisateur, mais vous devez utiliser la clé que vous avez utilisée dans votre authentification. Fichier js dans le dossier actions
pour stocker vos données avec un stockage asynchrone. Je récupère donc ceci et maintenant la chose importante à savoir
ici est que l'élément, comme toutes les méthodes de stockage asynchrones, est en fait asynchrone, ce qui signifie, comme son nom
l'indique, je suppose, ce qui signifie que vous obtenez une promesse ici, donc nous pouvons attendre
cela et cela nous rendra nos données d'utilisateur.
Maintenant, ce sont les données sous forme de chaîne, pour les convertir en données avec
lesquelles nous pouvons travailler, j'aurai mes données transformées avec JSON. analyser les données utilisateur et cela analyse une chaîne au
format JSON et la convertit en un objet ou un tableau Javascript. Maintenant, avant même d'essayer cela, je vais vérifier si les données utilisateur ne sont pas vraies, donc si
elles
ne sont pas définies, si nous ne pouvons pas trouver de données pour cette clé, car je sais que nous ne sommes
certainement pas connectés.
Alors ici, je veux revenir et ne pas continuer et faire une
chose importante, je vais utiliser la navigation des accessoires et naviguer vers l'écran d'authentification car cet écran de démarrage
doit être
ajouté au navigateur, donc ici nous pouvons l'importer, importer l'écran de démarrage à partir du dossier screens bien sûr, écran
de démarrage et nous l'ajoutons au navigateur principal
ici, donc là où nous avons également auth et shop et là tout en haut, j'ajoute startup et pointe sur mon écran de démarrage.
Cela signifie que c'est la première chose que je charge ici.
Maintenant, sur cet écran de démarrage, je vais donc à l'écran d'authentification si nous ne trouvons pas de jeton,
donc grâce au commutateur de navigation, je quitte cet écran et vais à l'écran d'authentification ou à la
pile d'authentification parce que je ne trouve pas un jeton. Donc, si nous le dépassons si nous vérifions, nous avons au moins quelques données mais le
jeton peut toujours être invalide.
Nous aurons donc bien sûr le jeton, l'ID utilisateur et la date d'expiration que nous pouvons extraire des données transformées après
cette ligne, ici avec
cette syntaxe de déstructuration d'objet et ce
sont les trois éléments de données avec les trois mêmes noms exacts que je stocke ici dans
l'auth. fichier js. Nous
avons donc ici un objet avec un champ token, userId
et expiration date, c'est ce
que nous stockons dans le stockage asynchrone, c'est ce que je peux récupérer ici.
Maintenant, nous devons vérifier si le jeton est
toujours valide et pour cela, je peux recréer ma date d'expiration en utilisant une nouvelle date et en passant la date d'expiration qui est en fait une chaîne au
format ISO et maintenant nous pouvons ajouter
une vérification if et voir si date d'expiration, donc la date à laquelle
le jeton devient invalide, si elle est inférieure ou égale à la nouvelle date, qui est l'horodatage actuel, ce qui
signifie que la date d'expiration est passée et si c'est dans le passé, alors notre jeton n'est pas valide.
Il est également invalide si nous ne pouvons pas trouver de jeton ou également si nous ne
pouvons pas trouver un ID utilisateur, si l'une des trois conditions est vraie, nous avons un jeton non valide ou un ID
utilisateur non valide ou quelque chose comme ça.
Donc, dans ce cas, je veux également revenir et
bien sûr naviguer vers l'écran d'authentification. Si nous le dépassons si check, nous avons
un jeton, nous avons un ID utilisateur et le jeton est toujours valide.
Donc, si vous arrivez ici, j'appellerai des accessoires. la navigation. naviguer dans la boutique pour aller à l'écran de
la boutique et aussi important, je dois connecter l'utilisateur et pour cela, nous
avons besoin d'une nouvelle action parce que je ne veux pas envoyer
de demande maintenant, je veux juste changer certaines données dans Redux. Je vais donc ajouter un nouveau créateur
d'action ici, exporter const authenticate peut-être qui prend mon userId et mon token et qui est ensuite utilisé pour changer mes données dans Redux et pour cela, je vais
maintenant
ajouter un nouvel identifiant d'action, authentifier avec une chaîne d'authentifier ici et l'utiliser ici comme type d'authentifier, attachez mon ID utilisateur
qui est mon ID utilisateur ici et mon jeton qui est le jeton que j'obtiens comme
argument et maintenant cette action d'authentification est ce que je veux envoyer ici sur
l'écran de démarrage.
Mais avant de le faire, nous pouvons également revenir au créateur d'action et à
la fin de l'inscription, au lieu d'envoyer ma propre action d'inscription personnalisée ici, nous pouvons également envoyer authentifier
et exécuter
ceci ici, ce créateur d'action et simplement transmettre resData. localId comme userId et resData. idToken en tant que jeton
et faites de même à la fin de la connexion.
Alors maintenant, j'ai effectivement combiné ces deux flux parce qu'au final, la même chose se produit, alors maintenant
dans le réducteur, dans le rédacteur d'authentification, bien sûr, au lieu de vérifier la connexion et l'inscription, nous pouvons
simplement importer authentifier et utiliser cet identifiant ici, se débarrasser de l'inscription et je vais juste le commenter pour le vivre
ici pour référence car la même chose se produit.
Alors maintenant, il est logique de le combiner car nous en avons également besoin pour cette connexion automatique.
Alors ici, je l'envoie également ici pour la connexion manuelle et l'inscription manuelle et bien sûr maintenant avec
cela, si vous le souhaitez, vous pouvez également vous débarrasser de la connexion et de l'inscription ici, de ces deux identifiants
parce que nous ne le faisons pas les utiliser plus.
Mais avec cela, revenons à l'écran de démarrage, ici nous pouvons
maintenant également distribuer ceci et pour cela, il vous suffit d'importer utiliser la répartition à partir de React Redux et d'importer l'action, alors importez tout en tant qu'actions
d'authentification, peut-être à partir du dossier du magasin, à partir de la dossier d'actions et à partir du fichier auth
là et puis
ici au début, accédez à la fonction de répartition en appelant use dispatch et avec celle disponible, ici
nous pouvons ajouter la répartition en tant que dépendance mais cela ne changera jamais, donc
l'effet ne se réexécutera jamais et ici après avoir accédé à la boutique, je veux maintenant également
envoyer des actions d'authentification authentifier et transmettre l'ID utilisateur extrait, donc ce champ ici et le jeton extrait, donc ce champ que j'ai obtenu de
mon stockage asynchrone et qui devrait maintenant me connecter automatiquement . Cela représentait beaucoup de travail, voyons
si cela fonctionne. Si je recharge cela, je me retrouve ici sur l'écran de connexion car
pour le moment je n'ai pas de jetons valides stockés dans le stockage asynchrone.
Alors maintenant, si j'essaye de me connecter ici, je suis transféré, si je recharge maintenant, je me retrouve à nouveau ici et c'est génial
car maintenant cela signifie que cela semble fonctionner et que le jeton est stocké.
Maintenant, bien sûr, ce serait bien si nous pouvions également nous déconnecter, car pour le moment, il n'y a aucun moyen
de le faire.