Więc jak możemy teraz opuścić ten ekran autoryzacji, jeśli jesteśmy zalogowani lub jeśli udało nam się zarejestrować?
To nie jest zbyt trudne.
Jeśli miniemy tę wysyłkę tutaj, nie lądując w bloku catch, więc nadal znajduje
się tutaj w bloku
try, możemy po prostu wywołać rekwizyty. nawigacja. nawiguj tak jak zawsze i
przejdź do innego ekranu, który skonfigurowaliśmy w
naszym przełączniku nawigacyjnym, w tym przypadku do ekranu sklepu. Więc zróbmy to, po prostu przejdźmy do sklepu i
na razie, jak tylko zalogujemy się pomyślnie, co teraz zrobię, ładuje się i
jesteśmy tutaj. Teraz dostanę
ostrzeżenie o pewnej aktualizacji stanu, której nie można wykonać, to ten
zestaw ładuje stan, który teraz zawiedzie, jeśli odejdziemy. Rozwiązaniem jest po prostu, że nie powinniśmy próbować aktualizować stanu na
tym ekranie, jeśli nie jesteśmy już na ekranie, więc możemy po prostu przenieść to do bloku catch, ponieważ będziemy musieli
zresetować ładowanie tylko, jeśli wystąpi błąd ponieważ jest to jedyny przypadek, gdy pozostajemy na ekranie uwierzytelniania,
w przeciwnym razie nie musimy zmieniać
stanu ładowania, ponieważ i tak wychodzimy z ekranu. Dzięki temu pozbywamy się
tego również,
jeśli spróbuję ponownie, zaczynamy i jesteśmy
w
naszym głównym sklepie. Teraz oczywiście nadal nie używamy tokena,
więc upewnijmy się, że
my również to robimy, a do tego przejdźmy do reduktora aut i dodajmy tam stan początkowy, który opisuje w
zasadzie, od którego stanu chcemy zacząć i jaki jest nasz ogólny stan
ma kształt i tam chcę przechowywać token, który początkowo ma wartość NULL i chcę przechowywać ID
użytkownika, który początkowo ma wartość NULL, więc bardzo podstawowy stan początkowy.
Następnie możemy wyeksportować funkcję reduktora, która przyjmuje ten stan początkowy i która również
oczywiście otrzymuje akcję, a tutaj chcę jak zawsze włączyć typ akcji i mam teraz
dwa przypadki, którymi jestem zainteresowany.
Jednym z nich jest akcja logowania, więc musisz zaimportować ten identyfikator z folderu akcji i tam pliku
uwierzytelniania, a drugim przypadkiem jest akcja rejestracji, więc musisz
również zaimportować ten
identyfikator, w innych przypadkach chcę po prostu zwróć mój stan. Więc jeśli się zalogujemy, chcę przywrócić nowy stan, w którym
token powinien być, powiedzmy, działaniem. token i userId powinny być działaniami. userId i to jest ta
sama aktualizacja, której potrzebuję przy rejestracji, abyśmy mogli ją tam skopiować.
Teraz oczywiście musimy upewnić się, że nasza akcja przenosi token i identyfikator
użytkownika, więc w kreatorze akcji pod koniec rejestracji tutaj, kiedy wysyłam akcję rejestracji, musimy dodać pole tokena
i musimy dodać identyfikator użytkownika pole.
Teraz token można pobrać z danych odpowiedzi, tam jest ten token ID i to samo tutaj, resData nie jest tokenem ID, ale
jest localId i widzisz, że tutaj w dzienniku, localId, to jest userID i jeśli
przewiniesz w górę , Token identyfikacyjny, to jest token. Wysyłam to tutaj i możemy to po prostu
skopiować i użyć tego samego, prawie tego samego do
logowania, jedyną rzeczą, którą należy zmienić, jest ten identyfikator, a nawet połączyć dane logowania i zarejestrować
się w jednym połączonym identyfikatorze uwierzytelnienia, powiedzmy ponieważ w reduktorze i tak robimy to samo.
Po prostu podzielę to tutaj, aby wyjaśnić, że na końcu mamy dwie różne rzeczy, ale aktualizacja
jest taka sama, więc zdecydowanie możemy połączyć te dwa rodzaje akcji.
Dzięki temu przechowujemy teraz token i to jest miłe, ale
po co nam ponownie ten token?
Potrzebujemy tego tokena, który teraz przechowujemy, aby uzyskać dostęp do naszego interfejsu API. W tym celu przejdźmy do Firebase i
bazy danych.
Pamiętaj, że kiedy konfigurujemy tę bazę danych, wspomniałem, że powinieneś zacząć w
tym trybie testowym, jeśli pamiętasz. W ten sposób skonfigurowano pewne reguły i możesz
je sprawdzić, klikając kartę reguł. Kontroluje to, kto może odczytywać i zapisywać dane
w bazie danych, a teraz jest to ustawione na wartość true, co oznacza, że każdy może czytać wszystko i
każdy może pisać wszystko.
Oczywiście nie jest to zwykle to, czego chcesz, zamiast tego ustawię tutaj opcję auth nierówną na null, która może wyglądać dziwnie, a przy okazji powinny to
być podwójne cudzysłowy, ale jest to składnia Firebase i możesz dowiedzieć się więcej o regułach tutaj
klikając na dowiedz się więcej lub po prostu google dla reguł bezpieczeństwa baz
danych Firebase w czasie rzeczywistym.
Mówi to Firebase, że tylko uwierzytelnieni użytkownicy, więc tylko użytkownicy, którzy wysyłają żądanie
z prawidłowym tokenem, powinni móc czytać i pisać.
Teraz możesz nawet argumentować, że Redux powinien zawsze
być dozwolony, możemy ustawić to na prawdę, a możesz nawet bardziej szczegółowo określić zasady, aby powiedzieć, że Redux z produktów
jest dozwolony, Redux
z zamówień nie jest, ale
znowu to jest coś, co możesz sprawdzić z oficjalnymi dokumentami.
Przejdę do konfiguracji, w której Redux jest zawsze dozwolony, ale pisanie nie.
Więc teraz do pisania potrzebujemy
tokena, w przeciwnym razie napotkamy problem. Jeśli zalogujemy się tutaj i przechowujemy token, ale
nie dołączamy go
teraz do żądań, widzisz, że możemy
załadować wszystkie dane, to dobrze, ale zauważysz również, że jeśli spróbuję to edytować
i usunąć kilka wykrzykników tutaj, w końcu pojawia się błąd i ten błąd jest zgłaszany, ponieważ nie wolno
mi pisać, dlatego Firebase blokuje dostęp i zwraca odpowiedź błędu.
Teraz musimy wykorzystać token przechowywany w reduktorze i dołączyć go do naszych
wychodzących żądań.
Teraz przede wszystkim musimy zarejestrować ten reduktor w naszym
reduktorze root, a więc w aplikacji. plik js, musimy go zaimportować, musimy zaimportować reduktor auth ze sklepu i
tam folder reduktorów i tam, plik auth i dodać go do połączonych reduktorów, może być tutaj z kluczem auth, ale
oczywiście można użyć dowolny klucz, jaki chcesz. To pozwoli nam następnie wykorzystać to
i uzyskać dostęp do tego tokena, ale teraz musimy dołączyć go do wychodzących żądań, na przykład
w przypadku produktów musimy dołączyć go do żądania,
które wysyłamy w celu aktualizacji produktów, więc taka byłaby ta prośba tutaj. Teraz sposób, w jaki dodajesz żądanie w Firebase, można
znaleźć w oficjalnych dokumentach Firebase dotyczących uwierzytelniania użytkownika bazy danych w czasie rzeczywistym tutaj,
na koniec dowiedziałeś się, że możesz dołączyć token do wychodzącego żądania, po prostu dodając to zapytanie uwierzytelniające parametr
na końcu adresu URL żądania.
Więc tutaj na końcu musimy dodać znak zapytania równości,
a następnie tutaj musimy mieć nasz token. Jak możemy uzyskać dostęp do tokena tutaj?
Jesteśmy twórcą akcji, co oznacza, że nie mamy łatwego dostępu do sklepu
tutaj, do sklepu Redux, czy my? Redux Thunk, fajny pakiet, który pozwala nam napisać tę składnię
z funkcją odbierającą funkcję wysyłającą, która w rzeczywistości daje nam coś słodkiego.
Możemy również nieco zmienić tę funkcję i nie tylko uzyskać wysyłkę, ale także uzyskać drugi argument,
który jest kolejną funkcją, która daje nam dostęp do stanu Redux, dzięki
czemu uzyskujemy dostęp do bieżącego stanu naszego sklepu Redux. Więc jeśli konsolę zarejestruję tutaj wynik stanu get,
zobaczmy, co to daje
i aby uniknąć błędów, na razie dodam pusty ciąg, abyśmy mogli przetestować ten kod.
Oczywiście to nie zadziała, ale wkrótce to naprawimy, więc zobaczmy, co jest w tym stanie, jeśli to
wykonamy.
Czas
więc ponownie zalogować się naprawdę szybko, a następnie przejść
do ekranu administratora i spróbować edytować to, co oczywiście nadal się nie
powiedzie, ale to nie ma znaczenia, ponieważ teraz, jeśli
kliknę tutaj, tak, to się nie powiedzie, ale zobaczysz to tutaj w dzienniku otrzymujemy pełną wydajność naszego
kompletnego sklepu Redux. To jest
nasz sklep Redux, otrzymujemy obiekt z naszym wycinkiem stanu uwierzytelnienia, który ma jeszcze inny obiekt z
naszym tokenem i identyfikatorem użytkownika, wycinkiem stanu karty, wycinkiem stanu zamówień i wycinkiem stanu naszych produktów.
To pozwala mi uzyskać dostęp do mojego sklepu Redux i dostęp do tokena, dzięki
czemu token można pobrać, uruchamiając getState. auth. token, ponieważ daje nam to dostęp
do naszego pełnego sklepu Redux, a następnie daje nam dostęp do wycinka uwierzytelnienia, a to do
właściwości tokena, którą zarządzamy w tym wycinku uwierzytelnienia. A teraz w kreatorze
akcji produktów możemy dodać ten token tutaj. Więc tutaj możemy po prostu zastąpić ten ciąg zmienną token, która
przechowuje nasz token, a
teraz, jeśli to zapiszemy, z tą niewielką zmianą, jeśli teraz ponownie się zalogujemy,
a później zmienimy to tak, aby
nie musieć stale ponownie się zalogować, bez obaw. Jeśli ponownie się zalogujemy, przejdziemy do administratora, kliknij tutaj, aby go dodać,
a teraz próbujemy tego, to działa ponownie, ponieważ teraz token jest dołączany, Firebase sprawdza go i stwierdza, że jest ważny,
ponieważ oczywiście nie zmieszaliśmy się z
nim , to prawidłowy token i dlatego to po prostu działa.
Teraz nie potrzebujemy tokena, gdy aktualizujemy nasze produkty, potrzebujemy go
również, gdy dodajemy nowy produkt. Więc skopiuję tę logikę i dodam tę
samą logikę tutaj, kiedy tworzymy produkt, otrzymuję mój token za pomocą drugiego argumentu, który możemy dostać
tutaj, jeśli jest to
potrzebne, funkcja get state i pozwala mi to zmień te pojedyncze cudzysłowy na tylne tiki, aby móc wygodnie dodać
ten parametr zapytania tutaj na końcu ze znakiem zapytania równym i równym temu z mojego tokena.
Więc teraz możemy stworzyć produkt i zaktualizować produkt, usunięcie oczywiście jest również
prośbą o zapis, więc dla usunięcia produktu zrobię to samo, uzyskam dostęp do mojego sklepu z
funkcją get state tutaj, a następnie dodam znak zapytania tutaj na końcu i dodaj token.
Więc to jedno.
Teraz w zamówieniach jest podobna rzecz, tam do pobierania, nie potrzebujemy tego, ale do dodawania robimy,
ponieważ dodawanie jest operacją zapisu.
Tak więc, jeśli chcemy, możemy uzyskać stan, możemy wyciągnąć token z tego samego podejścia, tak jak poprzednio, i
możemy dołączyć to tu i tam, tak naprawdę potrzebujemy również userId wkrótce, więc zajmiemy się tym o tym w następnym wykładzie, ale
na razie upewnij się,
że wszędzie dołączasz token, a teraz zobaczmy, w
jaki sposób możemy również upewnić się, że zamówienia naprawdę należą do naszego użytkownika.