Więc wiele osiągnęliśmy,
jesteśmy w stanie zapisywać dane, pobierać dane,
używać naszego tokena do określania zakresu danych lub określania zakresu
produktów i zamówień do naszego aktualnie zalogowanego użytkownika, jesteśmy w
stanie zalogować się i tak dalej,
i to wszystko jest miłe.
Jedną z rzeczy, których obecnie nie robimy, jest to, że nie kontynuujemy naszych
sesji, że tak powiem. Jeśli przeładuję, zawsze muszę się
ponownie zalogować i
nie jest to tak naprawdę to, co chciałbym, byłoby miło, gdybyśmy mogli automatycznie zalogować się, jeśli mamy
prawidłowy token, i do tego musimy zrobić dwie rzeczy - musimy przechowywać token gdzieś na urządzeniu, a nie w Redux,
ponieważ Redux jest w pamięci i zostanie to utracone przy każdym uruchomieniu aplikacji.
Musimy więc powiedzieć, że musi być gdzieś
na dysku twardym urządzenia, a ponadto musimy sprawdzać tę pamięć za każdym razem, gdy uruchamia się nasza aplikacja, i automatycznie
ustawiać token w Redux i przekierowywać użytkownika, jeśli znajdziemy tam prawidłowy token.
Teraz zacznijmy od przechowywania, ponieważ jest to logiczny pierwszy krok. Aby przechowywać, musimy zaimportować
coś tutaj, a nie w kreatorze akcji
produktów, ale tak naprawdę tutaj, w kreatorze akcji auth, tam trzeba zaimportować pamięć asynchroniczną z React Native.
Po zaimportowaniu
możemy użyć tego do zapisania danych na urządzeniu, pamięć asynchroniczna to React Native API, który ostatecznie korzysta z pamięci kluczowych wartości
na urządzeniu, która jest dostępna zarówno na iOS, jak i na Androidzie, gdzie możemy przechowywać
dane, które będą się utrzymywać między uruchomieniami aplikacji, dzięki którym możemy zapisywać dane, które nie zostaną utracone
podczas uruchamiania lub ponownego uruchamiania aplikacji.
Dodam więc nową funkcję, zapiszę dane w pamięci lub coś w tym stylu i
tam spodziewam się, że otrzymam mój token i identyfikator użytkownika, dwa fragmenty danych, którymi jestem zainteresowany, i możemy
teraz użyć pamięci asynchronicznej do tego czasu ustaw element, w jaki sposób zapisujesz dane, a ten element, który ustawiasz, musi być ciągiem,
ale przede wszystkim musisz zdefiniować klucz,
a ja nadam mu nazwę użytkownika, ale to
zależy od ciebie, później będziesz potrzebować tego klucza aby odzyskać dane,
a drugą wartością jest
teraz ciąg, więc ciąg, który chcesz tam zapisać i musisz zasadniczo zapisać ciąg.
Teraz
to żaden problem, możemy użyć JSON. stringify, aby przekonwertować obiekt JavaScript na ciąg znaków, a
obiekt, który chcę przekonwertować, to obiekt, który przechowuje mój token, który otrzymuję jako argument i zawiera identyfikator użytkownika,
który otrzymuję jako argument.
Na koniec zapisujemy ten obiekt jako ciąg na urządzeniu.
Teraz musimy po prostu wywołać zapisywanie danych do pamięci za każdym razem, gdy logujemy się lub rejestrujemy, więc tutaj może po
wysłaniu loginu możemy wywołać zapisywanie danych do pamięci i przekazywać resData. idToken
i resData. localId, więc te same rzeczy, których używamy w Redux
i na pewno chcemy ich tam użyć, ponieważ Redux jest ważny
dla działającej aplikacji, ale zapisuję go również na urządzeniu, gdy chcemy go załadować, gdy aplikacja uruchomi się ponownie.
Teraz jednak to samo nie załatwi sprawy i oczywiście musimy to zrobić
również podczas rejestracji, ale to samo nie załatwi sprawy, potrzebujemy tutaj dodatkowej informacji, zanim przejdziemy dalej.
Czy wiesz który Musimy wiedzieć, jak długo token jest ważny, ponieważ nie
możesz zapominać, że w końcu wygaśnie, dlatego do logowania i rejestracji dostaniesz to, co wygasa Kluczem
w odpowiedzi, który mówi w sekundach, ile czasu zajmuje do tokenów jest nieprawidłowy i Firebase nie będzie go
już akceptować.
Musimy również przechowywać te informacje, ponieważ jeśli później wrócimy, jeśli ponownie uruchomimy aplikację po trzech godzinach,
nasz token jest prawdopodobnie nieprawidłowy, więc musimy wiedzieć, kiedy token
zostanie unieważniony, abyśmy mogli to sprawdzić, kiedy
aplikacja uruchomi się ponownie, gdy sprawdzimy, czy mamy token, wiemy, czy ten token, który możemy
znaleźć, jest nadal aktualny, czy też już jest nieważny i tak czy inaczej potrzebujemy nowego tokena, w którym
to przypadku nie powinniśmy automatycznie logować się do użytkownika.
Chcę więc zapisać datę
ważności i utworzę tutaj datę ważności jako stałą, nowy obiekt daty, który ostatecznie powinien
przyjąć aktualną datę i dodać czas wygaśnięcia.
Teraz nowa data pobiera obiekt daty, ale wraz z czasem otrzymujemy bieżący znacznik czasu w milisekundach od początku
czasu, że tak powiem, czyli tutaj w JavaScript w
1970 roku.
To jest ilość w milisekundach i do tego możemy dodać resData. termin upływa.
Jest to liczba sekund, więc musimy przekonwertować to
na milisekundy, a także ciąg znaków, więc musimy przekonwertować to na liczbę.
Więc tutaj dodam tutaj plus lub po prostu przeanalizuję alternatywnie, aby przekonwertować to na liczbę całkowitą, a następnie pomnożę to przez
1000, aby przekonwertować to z sekund na milisekundy, ponieważ zysk czasu daje nam również milisekundy.
To, co mi to daje, to nowy znacznik czasu w przyszłości, czyli czas
bieżący plus czas wygaśnięcia, i zawijam to w inny obiekt daty, aby przekonwertować go
z ogromnej liczby milisekund na konkretny obiekt daty. Ta data wygaśnięcia jest teraz również tym, co musimy przekazać, aby
zapisać dane w pamięci, więc tutaj spodziewam się również daty wygaśnięcia
i musimy to załączyć tutaj.
Więc tutaj mogę nazwać tę datę ważności, żeby
ją pomieszać, to moja data ważności i tam chcę wywołać tę miłą, małą metodę toISOString, którą możemy wywoływać w
obiektach daty, ponieważ to przekształci ją w ciąg znaków w standardowym
formacie, który Chcę zapisać
Teraz to właśnie chcę zrobić, aby się zarejestrować, więc
można to tam skopiować i
to też chcę
tam zrobić, utworzyć datę wygaśnięcia i zapisać ją w pamięci.
Teraz zapisujemy to w pamięci, co jest miłe,
ale teraz musimy to sprawdzić również podczas logowania. Fajnym sposobem na to jest utworzenie nowego
ekranu, a ja utworzę go poza moimi istniejącymi folderami w folderze ekranów, ale
ani w sklepie, ani w użytkowniku. Nazwie ten ekran startowy i możesz go nazwać jakkolwiek ty chcieć.
Chodzi o to, że pokazuję ten ekran podczas uruchamiania mojej aplikacji i zastanawiam się, czy użytkownik jest uwierzytelniony, czy nie, i
to będzie super
szybkie, są szanse, że
nawet nie zobaczymy tego ekranu, gdy aplikacja się uruchomi. Teraz tutaj tworzymy zwykły komponent
React poprzez importowanie reakcji z reakcji i tam importuję
rzeczy z React Native, a konkretnie potrzebuję widoku, wskaźnika
aktywności pokazującego ładowanie tarczy podczas uruchamiania aplikacji, a także arkusz stylów, a także
pamięć asynchroniczna, ponieważ tutaj chcę również uzyskać dostęp do pamięci asynchronicznej, aby
dowiedzieć się, czy mamy prawidłowy token.
Więc tutaj mam komponent ekranu startowego, który jest zwykłym komponentem React, oraz obiekt
arkusza stylów tutaj z Arkuszem stylów. utwórz i ostatecznie możemy wyeksportować ten ekran startowy w ten sposób. Teraz w komponencie przedstawię
tutaj wskaźnik aktywności o wielkości dużej i kolorze kolorów. podstawowy i do tego trzeba oczywiście zaimportować
stałe kolory, a także przypisać trochę stylu do widoku, a ja
po prostu wezmę style. tutaj ekran, który możemy teraz dodać do
arkusza stylów i który
powinien być bardzo prosty, uelastycznij, uzasadnij centrum treści i wyrównaj centrum przedmiotów dla
niektórych treści wyśrodkowanych pionowo i poziomo. Teraz oczywiście ważne rzeczy dzieją się nad
kodem jsx, tutaj musimy teraz sprawdzić pamięć asynchroniczną pod
kątem prawidłowego tokena i mogę to zrobić za pomocą efektu use, który pozwala mi uruchomić
logikę tutaj, gdy ten komponent
zamontowany i rzeczywiście tutaj nie będę potrzebował żadnych zależności, ponieważ tutaj efekt użycia, chcę teraz dodać nową funkcję, którą nazwiemy, spróbuj
zarejestrować się lub spróbuj zalogować się bardziej pasuje i używam osobnej funkcji, ponieważ tutaj chcę użyć
asynchronizacji czekaj, co mogę zrobić, tworząc wewnętrzną funkcję, którą teraz mogę tutaj wywołać, spróbuj się
zalogować,
ponieważ ponownie, asynchronizacja tutaj tej funkcji, którą przekazujesz, aby użyć efektu, naprawdę nie
byłaby dozwolona, a tutaj przy próbie zalogowania
cel teraz sprawdza poprawność tokena w pamięci asynchronicznej. Dostaję tutaj moje dane użytkownika, uzyskując dostęp do
AsyncStorage.
getItem, a następnie użyj klucza użytego do przechowywania.
Tak więc w moim przypadku są to dane użytkownika, ale musisz użyć dowolnego klucza użytego w uwierzytelnieniu. plik js w folderze akcji
do przechowywania danych w pamięci asynchronicznej. Odzyskuję to i teraz ważne jest, aby wiedzieć, że
element get, podobnie jak wszystkie metody magazynowania asynchronicznego, w rzeczywistości jest asynchroniczny, co oznacza, że tak jak
sugeruje nazwa, co oznacza, że dostaniesz tutaj obietnicę, więc możemy poczekać na to i
zwróci nam to nasze dane użytkownika.
Teraz są to dane jako ciąg, aby przekonwertować je na kawałek danych, z którymi
możemy pracować, będę mieć moje przekształcone dane w JSON. parsuje dane użytkownika, a to analizuje ciąg znaków w
formacie JSON i konwertuje go na obiekt lub tablicę JavaScript. Teraz jeszcze zanim spróbuję, sprawdzę, czy dane użytkownika nie są zgodne z prawdą, więc
jeśli
nie są ustawione, czy nie możemy znaleźć żadnych danych dla tego klucza, ponieważ wiem, że na pewno nie
jesteśmy zalogowani.
Więc tutaj chcę wrócić i nie kontynuować i zrobić jedną
ważną rzecz, użyję nawigacji rekwizytów i przejdę do ekranu uwierzytelniania, ponieważ ten ekran startowy musi zostać
dodany
do nawigatora, więc tutaj możemy go zaimportować, zaimportować ekran startowy oczywiście z folderu ekrany, ekran startowy i
dodajemy go do głównego w nawigatorze tutaj,
więc tam, gdzie mamy również autoryzację i zakupy, a tam na samej górze, dodaję start i wskazuję na mój ekran startowy.
Oznacza to, że to pierwsza rzecz, którą tu ładuję.
Teraz na tym ekranie startowym przechodzę do ekranu autoryzacji, jeśli nie możemy znaleźć tokena,
więc dzięki nawigatorowi przełączania opuszczam ten ekran i przechodzę do ekranu autoryzacji lub
stosu autoryzacji, ponieważ nie mogę znaleźć token. Jeśli więc przejdziemy przez to, jeśli sprawdzimy, będziemy mieli przynajmniej jakieś dane, ale token
nadal może być nieprawidłowy.
Będziemy więc oczywiście mieć token, identyfikator użytkownika i datę ważności, którą możemy wyodrębnić z przekształconych danych po tym wierszu, tutaj z tą składnią
destrukcyjną obiektu i są
to trzy fragmenty danych o trzech dokładnie takich
samych nazwach, jakie przechowuję tutaj w auth.
plik js.
Mamy więc obiekt z tokenem, identyfikatorem użytkownika
i datą ważności,
to właśnie przechowujemy w pamięci asynchronicznej, to mogę tutaj odzyskać.
Teraz musimy sprawdzić, czy token jest nadal
ważny. W tym celu mogę odtworzyć datę wygaśnięcia, używając nowej daty i przekazując datę wygaśnięcia, która w rzeczywistości jest ciągiem w formacie ISO, a
teraz możemy dodać sprawdzanie if i
sprawdzić, czy data wygaśnięcia, więc data, w której token staje
się nieważny, jeśli jest mniejszy lub równy nowej dacie, co jest bieżącym znacznikiem czasu, co oznacza, że
data wygaśnięcia jest w przeszłości, a jeśli jest w przeszłości, to nasz token jest nieprawidłowy.
Jest również nieważny, jeśli nie możemy znaleźć tokena lub jeśli nie możemy
znaleźć identyfikatora użytkownika, jeśli którykolwiek z trzech warunków jest spełniony, mamy nieprawidłowy token lub nieprawidłowy
identyfikator użytkownika lub coś podobnego.
W takim przypadku chcę też wrócić i
oczywiście przejść do ekranu autoryzacji. Jeśli przejdziemy przez to, jeśli czek,
mamy token, mamy identyfikator użytkownika, a token jest nadal ważny.
Więc jeśli dasz radę tutaj, wywołam rekwizyty. nawigacja. nawiguj po sklepie, aby przejść do
ekranu sklepu, a także ważne, muszę się zalogować i do
tego potrzebujemy nowej akcji, ponieważ nie chcę teraz wysyłać
żądania, chcę tylko zmienić niektóre dane w Redux. Dodam więc nowego twórcę akcji,
może eksportuj stałe uwierzytelnianie, które może zabrać mój identyfikator użytkownika i mój token, a następnie służy do zmiany moich danych w Redux i do tego dodam
teraz
nowy identyfikator akcji, uwierzytelniając się za pomocą łańcucha uwierzytelnienia tutaj i użyj go tutaj jako uwierzytelnienia typu, dołącz mój
identyfikator użytkownika, który jest moim identyfikatorem użytkownika, i mój token, który jest tokenem, który otrzymuję
jako argument, a teraz to działanie uwierzytelnienia jest tym, co chcę wysłać tutaj
na ekranie startowym.
Ale zanim to zrobię, możemy również wrócić do twórcy akcji i pod koniec
rejestracji, zamiast wysłać tutaj moją własną niestandardową akcję rejestracji, możemy również wysłać uwierzytelnienie i wykonać to
tutaj,
ten twórca akcji i po prostu przekaż resData. localId jako userId i resData. idToken jako token
i zrób to samo na końcu logowania.
Więc teraz rzeczywiście połączyłem te dwa przepływy, ponieważ w końcu to samo się dzieje, więc
teraz w reduktorze, w reduktorze auth, oczywiście zamiast sprawdzania logowania i rejestracji, możemy po prostu zaimportować uwierzytelnianie
i użyć tego identyfikatora tutaj, pozbyć się rejestracji, a ja po prostu skomentuję to, aby nadal ją tutaj wyświetlać
w celach informacyjnych, ponieważ dzieje się to samo.
Teraz połączenie tego ma sens, ponieważ potrzebujemy go również do automatycznego logowania.
Więc tutaj wysyłam go również tutaj do ręcznego logowania i ręcznej rejestracji i
oczywiście teraz, jeśli chcesz, możesz również pozbyć się logowania i zarejestrować się tutaj, tych dwóch
identyfikatorów, ponieważ my nie użyj ich już.
Ale dzięki temu, z powrotem do ekranu startowego,
tutaj możemy teraz również wysłać to, a do tego wystarczy zaimportować use dispatch z React Redux i zaimportować akcję, więc zaimportuj wszystko jako
akcje autoryzacji może z folderu sklepu, z folder akcji i z pliku auth tam, a następnie
tutaj, na początku,
uzyskaj dostęp do funkcji wysyłki, wywołując use dispatch, a przy tym dostępnym, tutaj możemy
dodać wysyłkę jako zależność, ale to się nigdy nie zmieni, więc efekt
nigdy się nie uruchomi ponownie a tutaj po przejściu do sklepu chcę teraz wysłać
autoryzację i uwierzytelnić wyodrębnione ID użytkownika, więc to pole tutaj i wyodrębniony token, więc to pole, które otrzymałem z mojej pamięci
asynchronicznej i które powinno teraz automatycznie mnie zalogować . To było dużo pracy, zobaczmy, czy
to działa. Jeśli to przeładuję, skończę tutaj na ekranie logowania, ponieważ w
tej chwili nie mam żadnych ważnych tokenów zapisanych w pamięci asynchronicznej.
Więc teraz, jeśli spróbuję się zalogować tutaj, zostaniesz przekierowany, jeśli teraz przeładuję, znów skończę tutaj i to świetnie, ponieważ
teraz oznacza to, że to działa i że token jest przechowywany.
Teraz oczywiście byłoby miło, gdybyśmy mogli się wylogować, ponieważ w tej chwili nie ma
takiej możliwości.