1
00:00:02,140 --> 00:00:08,590
Więc jak możemy teraz opuścić ten ekran autoryzacji, jeśli jesteśmy zalogowani lub jeśli udało nam się zarejestrować?

2
00:00:09,520 --> 00:00:11,130
To nie jest zbyt trudne.

3
00:00:11,380 --> 00:00:16,690
Jeśli miniemy tę wysyłkę tutaj, nie lądując w bloku catch, więc nadal znajduje

4
00:00:16,720 --> 00:00:18,730
się tutaj w bloku

5
00:00:19,090 --> 00:00:26,560
try, możemy po prostu wywołać rekwizyty. nawigacja. nawiguj tak jak zawsze i

6
00:00:26,560 --> 00:00:29,470
przejdź do innego ekranu, który skonfigurowaliśmy w

7
00:00:29,470 --> 00:00:37,500
naszym przełączniku nawigacyjnym, w tym przypadku do ekranu sklepu. Więc zróbmy to, po prostu przejdźmy do sklepu i

8
00:00:37,500 --> 00:00:42,950
na razie, jak tylko zalogujemy się pomyślnie, co teraz zrobię, ładuje się i

9
00:00:43,030 --> 00:00:45,300
jesteśmy tutaj. Teraz dostanę

10
00:00:45,330 --> 00:00:49,300
ostrzeżenie o pewnej aktualizacji stanu, której nie można wykonać, to ten

11
00:00:49,300 --> 00:00:55,450
zestaw ładuje stan, który teraz zawiedzie, jeśli odejdziemy. Rozwiązaniem jest po prostu, że nie powinniśmy próbować aktualizować stanu na

12
00:00:55,450 --> 00:01:01,000
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

13
00:01:01,000 --> 00:01:05,560
zresetować ładowanie tylko, jeśli wystąpi błąd ponieważ jest to jedyny przypadek, gdy pozostajemy na ekranie uwierzytelniania,

14
00:01:05,560 --> 00:01:07,600
w przeciwnym razie nie musimy zmieniać

15
00:01:07,600 --> 00:01:12,190
stanu ładowania, ponieważ i tak wychodzimy z ekranu. Dzięki temu pozbywamy się

16
00:01:12,190 --> 00:01:13,780
tego również,

17
00:01:13,780 --> 00:01:17,080
jeśli spróbuję ponownie, zaczynamy i jesteśmy

18
00:01:17,300 --> 00:01:18,170
w

19
00:01:18,170 --> 00:01:22,730
naszym głównym sklepie. Teraz oczywiście nadal nie używamy tokena,

20
00:01:22,730 --> 00:01:24,620
więc upewnijmy się, że

21
00:01:24,740 --> 00:01:31,550
my również to robimy, a do tego przejdźmy do reduktora aut i dodajmy tam stan początkowy, który opisuje w

22
00:01:31,640 --> 00:01:35,850
zasadzie, od którego stanu chcemy zacząć i jaki jest nasz ogólny stan

23
00:01:36,230 --> 00:01:41,960
ma kształt i tam chcę przechowywać token, który początkowo ma wartość NULL i chcę przechowywać ID

24
00:01:41,960 --> 00:01:45,980
użytkownika, który początkowo ma wartość NULL, więc bardzo podstawowy stan początkowy.

25
00:01:45,980 --> 00:01:51,230
Następnie możemy wyeksportować funkcję reduktora, która przyjmuje ten stan początkowy i która również

26
00:01:52,010 --> 00:01:57,430
oczywiście otrzymuje akcję, a tutaj chcę jak zawsze włączyć typ akcji i mam teraz

27
00:01:57,430 --> 00:01:59,960
dwa przypadki, którymi jestem zainteresowany.

28
00:01:59,980 --> 00:02:08,190
Jednym z nich jest akcja logowania, więc musisz zaimportować ten identyfikator z folderu akcji i tam pliku

29
00:02:08,190 --> 00:02:12,530
uwierzytelniania, a drugim przypadkiem jest akcja rejestracji, więc musisz

30
00:02:12,580 --> 00:02:14,680
również zaimportować ten

31
00:02:15,820 --> 00:02:25,400
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

32
00:02:25,400 --> 00:02:33,400
token powinien być, powiedzmy, działaniem. token i userId powinny być działaniami. userId i to jest ta

33
00:02:33,940 --> 00:02:38,530
sama aktualizacja, której potrzebuję przy rejestracji, abyśmy mogli ją tam skopiować.

34
00:02:39,220 --> 00:02:44,530
Teraz oczywiście musimy upewnić się, że nasza akcja przenosi token i identyfikator

35
00:02:44,530 --> 00:02:51,970
użytkownika, więc w kreatorze akcji pod koniec rejestracji tutaj, kiedy wysyłam akcję rejestracji, musimy dodać pole tokena

36
00:02:51,970 --> 00:02:55,300
i musimy dodać identyfikator użytkownika pole.

37
00:02:55,470 --> 00:03:03,670
Teraz token można pobrać z danych odpowiedzi, tam jest ten token ID i to samo tutaj, resData nie jest tokenem ID, ale

38
00:03:03,670 --> 00:03:09,250
jest localId i widzisz, że tutaj w dzienniku, localId, to jest userID i jeśli

39
00:03:09,280 --> 00:03:16,530
przewiniesz w górę , Token identyfikacyjny, to jest token. Wysyłam to tutaj i możemy to po prostu

40
00:03:17,070 --> 00:03:21,140
skopiować i użyć tego samego, prawie tego samego do

41
00:03:21,150 --> 00:03:28,140
logowania, jedyną rzeczą, którą należy zmienić, jest ten identyfikator, a nawet połączyć dane logowania i zarejestrować

42
00:03:28,140 --> 00:03:34,800
się w jednym połączonym identyfikatorze uwierzytelnienia, powiedzmy ponieważ w reduktorze i tak robimy to samo.

43
00:03:34,920 --> 00:03:40,200
Po prostu podzielę to tutaj, aby wyjaśnić, że na końcu mamy dwie różne rzeczy, ale aktualizacja

44
00:03:40,200 --> 00:03:44,420
jest taka sama, więc zdecydowanie możemy połączyć te dwa rodzaje akcji.

45
00:03:45,250 --> 00:03:48,970
Dzięki temu przechowujemy teraz token i to jest miłe, ale

46
00:03:49,330 --> 00:03:51,990
po co nam ponownie ten token?

47
00:03:52,150 --> 00:03:59,700
Potrzebujemy tego tokena, który teraz przechowujemy, aby uzyskać dostęp do naszego interfejsu API. W tym celu przejdźmy do Firebase i

48
00:03:59,700 --> 00:04:00,870
bazy danych.

49
00:04:00,870 --> 00:04:05,940
Pamiętaj, że kiedy konfigurujemy tę bazę danych, wspomniałem, że powinieneś zacząć w

50
00:04:05,940 --> 00:04:11,370
tym trybie testowym, jeśli pamiętasz. W ten sposób skonfigurowano pewne reguły i możesz

51
00:04:11,370 --> 00:04:15,810
je sprawdzić, klikając kartę reguł. Kontroluje to, kto może odczytywać i zapisywać dane

52
00:04:15,810 --> 00:04:20,730
w bazie danych, a teraz jest to ustawione na wartość true, co oznacza, że każdy może czytać wszystko i

53
00:04:20,820 --> 00:04:21,930
każdy może pisać wszystko.

54
00:04:22,230 --> 00:04:32,630
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

55
00:04:32,630 --> 00:04:39,200
być podwójne cudzysłowy, ale jest to składnia Firebase i możesz dowiedzieć się więcej o regułach tutaj

56
00:04:39,200 --> 00:04:44,480
klikając na dowiedz się więcej lub po prostu google dla reguł bezpieczeństwa baz

57
00:04:44,480 --> 00:04:46,960
danych Firebase w czasie rzeczywistym.

58
00:04:47,000 --> 00:04:53,000
Mówi to Firebase, że tylko uwierzytelnieni użytkownicy, więc tylko użytkownicy, którzy wysyłają żądanie

59
00:04:53,000 --> 00:04:57,400
z prawidłowym tokenem, powinni móc czytać i pisać.

60
00:04:57,560 --> 00:05:00,080
Teraz możesz nawet argumentować, że Redux powinien zawsze

61
00:05:00,110 --> 00:05:06,710
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

62
00:05:06,710 --> 00:05:07,970
jest dozwolony, Redux

63
00:05:07,970 --> 00:05:09,770
z zamówień nie jest, ale

64
00:05:09,800 --> 00:05:13,200
znowu to jest coś, co możesz sprawdzić z oficjalnymi dokumentami.

65
00:05:13,370 --> 00:05:18,950
Przejdę do konfiguracji, w której Redux jest zawsze dozwolony, ale pisanie nie.

66
00:05:19,010 --> 00:05:22,160
Więc teraz do pisania potrzebujemy

67
00:05:22,160 --> 00:05:28,640
tokena, w przeciwnym razie napotkamy problem. Jeśli zalogujemy się tutaj i przechowujemy token, ale

68
00:05:28,640 --> 00:05:30,440
nie dołączamy go

69
00:05:30,650 --> 00:05:33,060
teraz do żądań, widzisz, że możemy

70
00:05:33,320 --> 00:05:38,510
załadować wszystkie dane, to dobrze, ale zauważysz również, że jeśli spróbuję to edytować

71
00:05:38,510 --> 00:05:45,420
i usunąć kilka wykrzykników tutaj, w końcu pojawia się błąd i ten błąd jest zgłaszany, ponieważ nie wolno

72
00:05:45,420 --> 00:05:49,190
mi pisać, dlatego Firebase blokuje dostęp i zwraca odpowiedź błędu.

73
00:05:49,190 --> 00:05:54,890
Teraz musimy wykorzystać token przechowywany w reduktorze i dołączyć go do naszych

74
00:05:54,890 --> 00:05:56,360
wychodzących żądań.

75
00:05:56,360 --> 00:06:00,940
Teraz przede wszystkim musimy zarejestrować ten reduktor w naszym

76
00:06:00,950 --> 00:06:08,300
reduktorze root, a więc w aplikacji. plik js, musimy go zaimportować, musimy zaimportować reduktor auth ze sklepu i

77
00:06:08,300 --> 00:06:14,780
tam folder reduktorów i tam, plik auth i dodać go do połączonych reduktorów, może być tutaj z kluczem auth, ale

78
00:06:14,780 --> 00:06:20,030
oczywiście można użyć dowolny klucz, jaki chcesz. To pozwoli nam następnie wykorzystać to

79
00:06:20,240 --> 00:06:26,360
i uzyskać dostęp do tego tokena, ale teraz musimy dołączyć go do wychodzących żądań, na przykład

80
00:06:26,360 --> 00:06:29,450
w przypadku produktów musimy dołączyć go do żądania,

81
00:06:29,510 --> 00:06:38,090
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

82
00:06:38,090 --> 00:06:44,570
znaleźć w oficjalnych dokumentach Firebase dotyczących uwierzytelniania użytkownika bazy danych w czasie rzeczywistym tutaj,

83
00:06:44,570 --> 00:06:52,640
na koniec dowiedziałeś się, że możesz dołączyć token do wychodzącego żądania, po prostu dodając to zapytanie uwierzytelniające parametr

84
00:06:52,760 --> 00:06:55,540
na końcu adresu URL żądania.

85
00:06:55,790 --> 00:06:59,690
Więc tutaj na końcu musimy dodać znak zapytania równości,

86
00:07:00,080 --> 00:07:06,160
a następnie tutaj musimy mieć nasz token. Jak możemy uzyskać dostęp do tokena tutaj?

87
00:07:06,180 --> 00:07:12,790
Jesteśmy twórcą akcji, co oznacza, że nie mamy łatwego dostępu do sklepu

88
00:07:13,070 --> 00:07:20,390
tutaj, do sklepu Redux, czy my? Redux Thunk, fajny pakiet, który pozwala nam napisać tę składnię

89
00:07:20,390 --> 00:07:24,720
z funkcją odbierającą funkcję wysyłającą, która w rzeczywistości daje nam coś słodkiego.

90
00:07:24,800 --> 00:07:30,860
Możemy również nieco zmienić tę funkcję i nie tylko uzyskać wysyłkę, ale także uzyskać drugi argument,

91
00:07:30,860 --> 00:07:35,250
który jest kolejną funkcją, która daje nam dostęp do stanu Redux, dzięki

92
00:07:35,510 --> 00:07:43,230
czemu uzyskujemy dostęp do bieżącego stanu naszego sklepu Redux. Więc jeśli konsolę zarejestruję tutaj wynik stanu get,

93
00:07:43,230 --> 00:07:45,300
zobaczmy, co to daje

94
00:07:45,300 --> 00:07:51,860
i aby uniknąć błędów, na razie dodam pusty ciąg, abyśmy mogli przetestować ten kod.

95
00:07:51,870 --> 00:07:56,400
Oczywiście to nie zadziała, ale wkrótce to naprawimy, więc zobaczmy, co jest w tym stanie, jeśli to

96
00:07:56,400 --> 00:07:56,700
wykonamy.

97
00:08:00,000 --> 00:08:00,540
Czas

98
00:08:00,570 --> 00:08:03,660
więc ponownie zalogować się naprawdę szybko, a następnie przejść

99
00:08:04,550 --> 00:08:09,010
do ekranu administratora i spróbować edytować to, co oczywiście nadal się nie

100
00:08:09,970 --> 00:08:13,300
powiedzie, ale to nie ma znaczenia, ponieważ teraz, jeśli

101
00:08:13,420 --> 00:08:19,690
kliknę tutaj, tak, to się nie powiedzie, ale zobaczysz to tutaj w dzienniku otrzymujemy pełną wydajność naszego

102
00:08:19,780 --> 00:08:22,270
kompletnego sklepu Redux. To jest

103
00:08:22,270 --> 00:08:28,570
nasz sklep Redux, otrzymujemy obiekt z naszym wycinkiem stanu uwierzytelnienia, który ma jeszcze inny obiekt z

104
00:08:28,570 --> 00:08:34,880
naszym tokenem i identyfikatorem użytkownika, wycinkiem stanu karty, wycinkiem stanu zamówień i wycinkiem stanu naszych produktów.

105
00:08:34,960 --> 00:08:40,540
To pozwala mi uzyskać dostęp do mojego sklepu Redux i dostęp do tokena, dzięki

106
00:08:40,540 --> 00:08:48,060
czemu token można pobrać, uruchamiając getState. auth. token, ponieważ daje nam to dostęp

107
00:08:48,070 --> 00:08:53,890
do naszego pełnego sklepu Redux, a następnie daje nam dostęp do wycinka uwierzytelnienia, a to do

108
00:08:53,890 --> 00:08:59,810
właściwości tokena, którą zarządzamy w tym wycinku uwierzytelnienia. A teraz w kreatorze

109
00:09:00,090 --> 00:09:09,440
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

110
00:09:09,440 --> 00:09:11,600
przechowuje nasz token, a

111
00:09:11,600 --> 00:09:17,330
teraz, jeśli to zapiszemy, z tą niewielką zmianą, jeśli teraz ponownie się zalogujemy,

112
00:09:17,390 --> 00:09:20,000
a później zmienimy to tak, aby

113
00:09:20,000 --> 00:09:27,490
nie musieć stale ponownie się zalogować, bez obaw. Jeśli ponownie się zalogujemy, przejdziemy do administratora, kliknij tutaj, aby go dodać,

114
00:09:27,710 --> 00:09:33,800
a teraz próbujemy tego, to działa ponownie, ponieważ teraz token jest dołączany, Firebase sprawdza go i stwierdza, że jest ważny,

115
00:09:33,830 --> 00:09:35,890
ponieważ oczywiście nie zmieszaliśmy się z

116
00:09:35,900 --> 00:09:39,170
nim , to prawidłowy token i dlatego to po prostu działa.

117
00:09:39,200 --> 00:09:43,190
Teraz nie potrzebujemy tokena, gdy aktualizujemy nasze produkty, potrzebujemy go

118
00:09:43,190 --> 00:09:48,410
również, gdy dodajemy nowy produkt. Więc skopiuję tę logikę i dodam tę

119
00:09:48,410 --> 00:09:54,310
samą logikę tutaj, kiedy tworzymy produkt, otrzymuję mój token za pomocą drugiego argumentu, który możemy dostać

120
00:09:54,310 --> 00:09:56,330
tutaj, jeśli jest to

121
00:09:56,440 --> 00:10:03,320
potrzebne, funkcja get state i pozwala mi to zmień te pojedyncze cudzysłowy na tylne tiki, aby móc wygodnie dodać

122
00:10:03,320 --> 00:10:09,530
ten parametr zapytania tutaj na końcu ze znakiem zapytania równym i równym temu z mojego tokena.

123
00:10:09,530 --> 00:10:15,300
Więc teraz możemy stworzyć produkt i zaktualizować produkt, usunięcie oczywiście jest również

124
00:10:15,410 --> 00:10:22,430
prośbą o zapis, więc dla usunięcia produktu zrobię to samo, uzyskam dostęp do mojego sklepu z

125
00:10:22,430 --> 00:10:29,130
funkcją get state tutaj, a następnie dodam znak zapytania tutaj na końcu i dodaj token.

126
00:10:29,300 --> 00:10:30,290
Więc to jedno.

127
00:10:30,320 --> 00:10:36,260
Teraz w zamówieniach jest podobna rzecz, tam do pobierania, nie potrzebujemy tego, ale do dodawania robimy,

128
00:10:36,290 --> 00:10:38,260
ponieważ dodawanie jest operacją zapisu.

129
00:10:38,480 --> 00:10:45,110
Tak więc, jeśli chcemy, możemy uzyskać stan, możemy wyciągnąć token z tego samego podejścia, tak jak poprzednio, i

130
00:10:45,110 --> 00:10:52,880
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

131
00:10:52,880 --> 00:10:54,860
na razie upewnij się,

132
00:10:54,860 --> 00:10:57,810
że wszędzie dołączasz token, a teraz zobaczmy, w

133
00:10:57,890 --> 00:11:02,570
jaki sposób możemy również upewnić się, że zamówienia naprawdę należą do naszego użytkownika.