Aby mieć pewność, że wylogujemy się po wygaśnięciu tokena, dodam nową funkcję w naszej
akcji auth,
a więc w folderze akcji w auth. Plik js, dodam tutaj nową funkcję, w
której chcę ustawić licznik czasu, który zasadniczo wygasa po wygaśnięciu tokena. Możemy więc na przykład wywołać ten licznik wylogowania zestawu
i
tam, spodziewam się uzyskać czas wygaśnięcia, i tutaj, możemy użyć starego dobrego limitu czasu, który React Native obsługuje w jego wersji Javascript,
aby ustawić licznik czasu, który wygaśnie po tym czasie i powiedzmy, że jest to wartość w milisekundach,
więc to tylko założenie, które mam i musimy upewnić się, że
przekazujemy dane w milisekundach. Odtąd ta funkcja
będzie tutaj wykonywana po wygaśnięciu tokena i tam jest teraz pytanie, co my tam robimy?
Cóż, w końcu chcę wysłać tutaj
wylogowanie, prawda?
Dlatego ustawiony zegar wylogowania prawdopodobnie nie powinien być normalną funkcją, ale tak naprawdę tutaj będę
miał funkcję, która korzysta z Redux Thunk, więc gdzie mamy
tę funkcję w funkcji, w której ta funkcja wewnętrzna zostaje wysłana jako argument, a
zatem raz to zadanie asynchroniczne zakończone,
po upływie tego czasu możemy wysłać wylogowanie, abyśmy mogli wysłać wynik tego twórcy akcji, która jest tą akcją
na końcu, tak
aby miało to miejsce po zakończeniu timera.
Teraz, kiedy się wylogowujemy, chcę również wyczyścić wszystkie uruchomione timery, ponieważ być może mamy
tutaj automatycznie ustawiony timer, którego jeszcze nie ustawiamy, ale wkrótce to zrobimy, a następnie chcę wyczyścić ten
timer, gdy wylogujemy się ręcznie, aby Nie mam
tego timera, nawet jeśli jest zbędny. Możemy więc dodać nową zmienną, może na
górze pliku, tutaj będę nazywał timer, który jest początkowo niezainicjowany, a następnie tutaj, kiedy ustawimy
timer, ustawię wynik ustawionego limitu czasu na timer lub zapisz wynik tego w liczniku czasu,
który jest wskaźnikiem tego licznika czasu i dodaj nową
funkcję, być może tutaj, wyczyść licznik czasu wylogowania, który jest teraz normalną funkcją, a nie funkcją, która pobiera tę wewnętrzną funkcję
wysyłki, ale normalną funkcją, w której po prostu nazywam wyczyść licznik czasu oczekiwania i timer to zmienna
wskazująca timer.
Chcę tylko sprawdzić, czy timer istnieje, jeśli nie jest niezdefiniowany, a jeśli nie jest niezdefiniowany,
wywołam to, funkcja Clear Timeout to wbudowana funkcja wbudowana w JavaScript, która pozwala pozbyć się tego timera.
Dzięki temu możemy
wyczyścić licznik czasu, jeśli go już nie potrzebujemy, a ja chcę się
go pozbyć za każdym razem, gdy się wylogowujemy, więc za każdym razem, gdy się to zdarzy, wywołam czysty licznik czasu wylogowania i jeszcze jedną
rzecz, którą muszę zrobić, gdy Wylogowuję się, muszę oczyścić pamięć asynchroniczną.
Więc tutaj mogę zadzwonić do pamięci asynchronicznej usunąć dane użytkownika elementu, ponownie używając tego samego identyfikatora, którego użyłem do przechowywania
danych.
Więc użyłem danych użytkownika tam,
muszę użyć tego samego identyfikatora do ich wyczyszczenia. Teraz usuń element zwraca obietnicę i
moglibyśmy
na to poczekać, w takim przypadku musielibyśmy zwrócić tę wewnętrzną składnię, w której otrzymujemy
wysyłkę i wykonujemy nasze zadanie asynchroniczne, więc przenosimy ten kod tutaj, a następnie tutaj możemy
wysłać to akcja.
Moglibyśmy to wszystko zrobić, jeśli jesteśmy zainteresowani
wynikiem usunięcia przedmiotu, ale tutaj nie jestem zainteresowany, po prostu go zwolnię i nie czekam
na spełnienie tej obietnicy, zamiast tego natychmiast zwracam ten nowy obiekt akcji i ufam, że to się skończy.
Teraz oczywiście możesz to zrestrukturyzować, ale tak to
zrobię, powinno to usunąć dane z naszej lokalnej pamięci. Dzięki temu wylogowanie robi to, mamy
funkcję timera wylogowania, który ustawia timer, który wylogowuje się po wygaśnięciu, teraz musimy tylko upewnić
się, że wyślemy tutaj ten zestaw kreatora akcji wylogowania, że używamy
tego kreatora akcji i Chcę tego użyć podczas uwierzytelniania. Mamy więc tę autentyczną
akcję tu i tam na końcu, muszę wysłać set
timer wylogowania, a także tutaj. Tak więc, teraz użyję teraz tej różnej
składni, w której mamy tę wewnętrzną funkcję, która odbiera wysyłanie, aby tutaj mógł wysyłać
ustawiony licznik wylogowania, aby został tutaj uruchomiony i oczywiście oznacza to
również, że tutaj zamiast zwracać to, my również musimy to wysłać, więc
wysyłamy tutaj dwie akcje, co jest absolutnie w porządku. Ustawiam więc licznik czasu, a następnie wysyłam
akcję uwierzytelnienia.
Teraz, oczywiście, zegar wylogowania musi wiedzieć, jak długo powinien to potrwać, wymagany jest czas
wygaśnięcia i spodziewam się tego, ten czas wygaśnięcia po prostu pomieszać nazwy, jako argument tutaj w uwierzytelnieniu, aby
móc go przesłać tutaj do mojego timera wylogowania.
Oznacza to, że każde miejsce, w którym wysyłamy akcję uwierzytelnienia lub w którym korzystamy z tego twórcy akcji, powinienem
powiedzieć, że każde miejsce, w którym to robimy, nie tylko musi podać identyfikator użytkownika i token, ale
także czas wygaśnięcia i zaczyna się
tutaj Zapisz się. Kiedy się
rejestrujemy, mamy tutaj datę ważności i wysyłamy uwierzytelnienie. Teraz uwierzytelnianie wymaga również czasu
wygaśnięcia.
Dobrą rzeczą jest to, że bardzo łatwo jest ustalić, kiedy to
wygasa, ponieważ mamy go w danych odpowiedzi, mamy to wygasające w polu, które jest oczywiście
ciągiem, więc dzięki parseInt możemy przekonwertować to na liczbę a potem nastąpi to w kilka sekund, uwierzytelnij się i ustaw licznik wylogowania
oczekuj wartości w milisekundach, więc pomnożę to
przez 1000 i oczywiście dodam to również przy logowaniu. Dodam tam również jako trzeci
argument, aby w celu zalogowania się
po wysłaniu tej akcji uwierzytelniającej przekazaliśmy również czas wygaśnięcia, który
otrzymujemy z Firebase. Teraz mamy jeszcze jedno miejsce, w
którym musimy to zrobić, i
to jest ekran startowy, ponieważ tam również wysyłamy uwierzytelnianie i tutaj musimy obliczyć pozostały czas, ponieważ uruchamia się
przy każdym ponownym
uruchomieniu aplikacji, więc tutaj nie wiemy ile czasu zajmie wygaśnięcie
tokena i musimy to obliczyć.
Więc tutaj mogę obliczyć czas wygaśnięcia, biorąc po prostu datę wygaśnięcia, która jest obiektem daty i wywołując czas
get, który daje mi swój znacznik czasu w milisekundach od początku czasu,
i
od tego muszę odjąć bieżący czas uzyskania czasu, więc bieżący
znacznik czasu w milisekundach. Będzie to miało miejsce w
przyszłości, jest
to teraz, więc różnica powinna być liczbą dodatnią, ponieważ sprawdzam, że będzie to w
przyszłości tutaj, więc powinna być liczbą dodatnią w milisekundach.
Teraz czas wygaśnięcia tutaj można przesłać w celu uwierzytelnienia, a dzięki temu powinniśmy również mieć automatyczne
wylogowanie.
Teraz, aby
sprawdzić, czy to działa, przejdźmy do autoryzacji. plik js i faktycznie tam, w ustawionej funkcji timera
wylogowania tymczasowo podzielę czas wygaśnięcia przez 1000, co oznacza, że podzielę milisekundy przez 1000, co zamieni je w
sekundy, a to
oznacza, że powinniśmy natychmiast się wylogować.
Jeśli przeładuję, jestem wylogowany, ale wkrótce zauważysz, że tylko teoretycznie działa. Jeśli zaloguję się ponownie, jestem zalogowany
i teraz, ponieważ podzieliłem wartość przez 1000, powinienem się
wylogować po 3. 6 sekund, ale nie jestem. Mogę się poruszać, ale
jeśli przeładuję, rzeczywiście jestem teraz wylogowany. Więc to tak jakby oczyściło dane, ale nie nawigowało nas z powrotem do
ekranu autoryzacji,
a powodem tego jest to, że nigdy nie instruujemy React Native, aby nawigował nas z powrotem do ekranu
autoryzacji, więc to brakujący element.
Opróżnienie naszego sklepu Redux jest przyjemne, ale w reakcji na tę odprawę musimy
upewnić się, że wróciliśmy do ekranu autoryzacji. Aby mieć pewność, że tak się stanie, potrzebujemy jednego miejsca, które jest
zawsze renderowane, które otacza całą naszą aplikację, w którym możemy słuchać naszego sklepu Redux i dowiedzieć się, kiedy nasz token zostanie zresetowany do zera, aby
w takim przypadku móc wrócić do ekran autoryzacji. To byłaby aplikacja. plik js, ponieważ to wszystko
wszystko otacza, ale
problem jest tam, skonfigurowałem tutaj Redux. Więc Redux w moim sklepie jest dostępny tylko
tutaj, więc w zagnieżdżonych komponentach potomnych i to już jest mój komponent nawigacyjny, do którego nie mam
bezpośredniego dostępu.
Rozwiązaniem jest po prostu owinięcie tego innym komponentem. Stworzę to w folderze nawigacji,
ponieważ nadam mu nazwę kontenera nawigacji.
Teraz jest to normalny komponent React, taki jak ten, w
którym nie potrzebuję niczego z React Native, ale w którym właśnie skonfigurowałem komponent kontenera nawigacyjnego, w którym otrzymuję
rekwizyty i zwracam trochę jsx na końcu i eksportuję to jako domyślny kontener nawigacyjny.
Teraz tam chcę skonfigurować nawigację, więc zaimportuję nawigator sklepu z nawigatora sklepu, który znajduje się w tym
samym folderze i to właśnie tu
wrócę, mój nawigator sklepu tak. Teraz mogę używać mojego kontenera nawigacyjnego tutaj w aplikacji. plik js, więc zamiast
importować tutaj nawigator sklepu, importuję mój kontener nawigacyjny z folderu nawigacyjnego oraz z pliku kontenera
nawigacyjnego i używam tutaj kontenera nawigacyjnego zamiast nawigatora sklepu.
Teraz jest to po prostu opakowanie wokół nawigatora sklepu, ale ponieważ jest ono wewnątrz dostawcy,
mam teraz dostęp do Redux.
Więc tutaj możemy zaimportować selektor użycia z React Redux i użyć go tutaj, aby skorzystać z Redux.
Więc tutaj, w kontenerze nawigacyjnym, mogę po prostu uzyskać dostęp do isAuth, powiedzmy, używając selektora use, który przyjmuje tę funkcję, która daje mi dostęp do stanu Redux, a
następnie mogę uzyskać dostęp do stanu. auth. token, aby uzyskać dostęp
do tokena w moim wycinku stanu uwierzytelnienia i użyć operatora podwójnego uderzenia, aby w zasadzie wymusić, aby było to prawda
lub fałsz, a jeśli nie będziemy mieli tokena, będzie to fałsz, więc w takim przypadku wartość Prawda
będzie fałszywa, jeśli mamy token, to będzie prawda,
więc prawda jest prawdziwa, jeśli mamy token, który wydaje mi się sensowny. Teraz możemy użyć efektu, aby zareagować na zmiany
w tym.
Więc tutaj w użyciu efekt, moja tablica zależności zawiera isAuth, więc
gdy zmienia się isAuth, ta funkcja efektu powinna się uruchomić i dlatego tutaj mogę sprawdzić, czy nie jesteśmy uwierzytelnieni, ponieważ
o to dbam, jeśli isAuth
nie jest prawdą , jeśli to prawda, nie dbam o to, ale jeśli to nieprawda, chcę
przejść do ekranu uwierzytelniania i teraz mamy inny problem.
Nawigator jest tutaj i tylko w komponentach renderowanych za pomocą nawigatora mamy
dostęp do rekwizytów. nawigacja. Nawiguj, ale na szczęście React Navigation daje nam luk ratunkowy. Możemy użyć
referencji, aby uzyskać dostęp do funkcji nawigacji za pomocą tego
komponentu, gdy używamy go w naszym kodzie jsx. Możemy utworzyć taki ref z użyciem ref z użyciem hook ref i
użyj naszego ref nav tutaj, wywołując use ref
w ten sposób i powinieneś być świadomy referencji w React, który jest w zasadzie sposobem
na bezpośredni dostęp do elementu renderujemy w jsx, a teraz możemy dodać właściwość ref do nawigatora sklepu i przypisać to do
ref ref lub na odwrót.
To ustanawia połączenie między stałą ref odniesienia a tym elementem, który ostatecznie jest renderowany tu i
teraz, z tym tutaj w efekcie, możemy wywołać navRef. obecnie, tak działają
ref,
mają bieżącą wysyłkę właściwości. Wysyłka jest metodą udostępnioną przez nawigatora sklepu lub przez ten kontener aplikacji, który jest w końcu,
ponieważ kontener sklepu to nic innego niż to, co ShopNavigator. js eksportuje, który jest takim składnikiem
kontenera aplikacji i ten składnik ma metodę wysyłki, której możemy użyć do
wysłania akcji nawigacyjnej. W tym celu
musimy teraz zaimportować coś z nawigacji React i że coś jest tu obiektem działań nawigacyjnych, a
tu tutaj, nazywamy NavigationActions. nawiguj, a teraz
pozwala nam to nawigować. Jednak nie w przypadku takiego uwierzytelnienia, ale wymaga
to obiektu jako argumentu, w którym konfigurujesz nazwę trasy, i może to być teraz uwierzytelnianie.
W ten sposób możemy teraz nawigować z wnętrza tego komponentu, nawet jeśli znajduje się on poza nawigatorem.
Tak dzieje się z uwierzytelnianiem, ilekroć nasz stan isAuth zmienia się na nieautoryzowany, oznacza to także, że w
nawigatorze sklepu, w naszym przycisku wylogowania, nie musimy nawigować tutaj, ponieważ jeśli uruchomimy wylogowanie, jeśli uruchomimy
tę akcję , usuwamy token w Redux i dlatego powinno to automatycznie
uruchamiać naszą nawigację dzięki temu kontenerowi nawigacyjnemu, a
zatem teraz, jeśli to zapiszemy, powinniśmy przejść do uwierzytelniania, gdy token jest nieprawidłowy.
Więc teraz, jeśli zaloguję się ponownie po 3. 6 sekund, powinniśmy się wylogować i powinniśmy zobaczyć, że
jesteśmy wylogowani,
tak, to wygląda dobrze.
Spróbujmy tutaj jeszcze
raz, tak, wracając i spróbujmy też wylogować się ręcznie.
Więc jeśli pójdę się zalogować, otwórz to, kliknij wyloguj się, to również działa.
Dzięki temu mamy wbudowaną funkcję automatycznego wylogowania,
teraz wróćmy do pliku akcji auth i usuńmy tutaj ten fałszywy podział, ponieważ zrobiłem to
tylko w celu przetestowania, oczywiście nie chcę ręcznie skracać czasu
ważności , zamiast tego mamy tutaj funkcjonalność, która działa i zapewnia, że bez względu na to,
czy się rejestrujemy, czy logujemy, czy cokolwiek, co robimy, mamy token, który przechowujemy, którego możemy użyć
i upewniamy się, że wylogujemy się również automatycznie, jeśli wygaśnie nasz token.
To jest tutaj ukończona aplikacja.