1
00:00:03,650 --> 00:00:08,090
Agora, que concluímos a atualização do lado do servidor.

2
00:00:08,090 --> 00:00:11,045
É hora de passar para o cliente reagir.

3
00:00:11,045 --> 00:00:15,060
Para sua conveniência, eu forneci a você o repositório GitHub,

4
00:00:15,060 --> 00:00:20,330
que contém a versão final do cliente que é capaz de se comunicar com o

5
00:00:20,330 --> 00:00:26,300
nosso servidor REST API e, em seguida, processar as várias visualizações para o nosso cliente.

6
00:00:26,300 --> 00:00:30,095
Então, eu tomei a reaplicação que nós desenvolvemos no

7
00:00:30,095 --> 00:00:34,040
segundo curso da especialização e, em seguida, modificá-lo.

8
00:00:34,040 --> 00:00:39,175
Faremos um breve passeio pelo código um pouco mais tarde.

9
00:00:39,175 --> 00:00:43,520
Agora, você clonará o repositório Git para o seu computador

10
00:00:43,520 --> 00:00:49,955
e, em seguida, inicializará seu cliente e, em seguida, vê-lo se comunicando com nosso conjunto de servidores.

11
00:00:49,955 --> 00:00:53,655
Vamos ver os detalhes a seguir.

12
00:00:53,655 --> 00:00:56,985
Para começar com este exercício,

13
00:00:56,985 --> 00:01:00,460
no terminal ou na janela de comando,

14
00:01:00,460 --> 00:01:06,429
vá para o local conveniente e, em seguida, no prompt, digite git clone

15
00:01:06,429 --> 00:01:22,280
https://github.com/jmuppala/conFusion-React.git e, em seguida, deixe

16
00:01:22,280 --> 00:01:27,315
o aplicativo React ser clonado para o computador.

17
00:01:27,315 --> 00:01:29,210
Quando a clonagem estiver concluída,

18
00:01:29,210 --> 00:01:34,350
mova para a pasta Confusion-React

19
00:01:34,350 --> 00:01:38,625
que acabou de ser criada quando você clonou este repositório Git.

20
00:01:38,625 --> 00:01:43,965
Então, você notará imediatamente que já há um monte de arquivos lá.

21
00:01:43,965 --> 00:01:50,565
Agora, no prompt, digite yarn install,

22
00:01:50,565 --> 00:01:54,350
a fim de instalar todos os módulos de nó em

23
00:01:54,350 --> 00:01:58,155
que este aplicativo React é dependente.

24
00:01:58,155 --> 00:02:03,140
Assim, uma vez que os módulos do nó estão todos instalados,

25
00:02:03,140 --> 00:02:11,810
então podemos iniciar o nosso fio começar a compilar e servir até o nosso aplicativo React.

26
00:02:11,810 --> 00:02:13,840
Uma vez que tudo está dentro,

27
00:02:13,840 --> 00:02:18,650
certifique-se de que o seu servidor MongoDB está

28
00:02:18,650 --> 00:02:23,775
funcionando e também o seu servidor API REST também está funcionando.

29
00:02:23,775 --> 00:02:26,030
Caso contrário, o cliente não funcionará.

30
00:02:26,030 --> 00:02:30,650
Então, agora que você instalou seu cliente em seu computador,

31
00:02:30,650 --> 00:02:33,200
adicione o prompt tipo yarn start

32
00:02:33,200 --> 00:02:38,610
e seu aplicativo será recompilado e servido em um curto espaço de tempo.

33
00:02:38,610 --> 00:02:42,434
Uma vez que seu aplicativo é compilado com sucesso,

34
00:02:42,434 --> 00:02:45,650
vá para o navegador e você verá que

35
00:02:45,650 --> 00:02:51,095
seu aplicativo React é iniciado e é visível na tela aqui.

36
00:02:51,095 --> 00:02:54,290
Você notará imediatamente que seu aplicativo é

37
00:02:54,290 --> 00:02:57,440
capaz de buscar os dados do servidor e, em seguida, processar

38
00:02:57,440 --> 00:03:00,815
as várias partes de seu aplicativo exatamente como o que você

39
00:03:00,815 --> 00:03:06,070
fez no final do seu curso React.

40
00:03:06,100 --> 00:03:08,635
Quando você vai para a pasta Sobre,

41
00:03:08,635 --> 00:03:14,025
você também verá que a página Sobre também renderiza as informações.

42
00:03:14,025 --> 00:03:16,880
Como tal anteriormente no menu,

43
00:03:16,880 --> 00:03:21,845
você vê os itens no menu sendo exibidos exatamente como vimos com o aplicativo.

44
00:03:21,845 --> 00:03:23,950
Agora, além disso, adicionei

45
00:03:23,950 --> 00:03:28,475
mais uma página ao aplicativo de página única chamado Meus Favoritos,

46
00:03:28,475 --> 00:03:31,150
para o qual você não pode navegar,

47
00:03:31,150 --> 00:03:35,170
porque nenhum usuário está logado em seu sistema.

48
00:03:35,170 --> 00:03:38,330
Então, você vê que eu não tenho nenhum usuário conectado ao sistema.

49
00:03:38,330 --> 00:03:42,160
Então, é por isso que não há nenhum ponto em indicar meus favoritos porque você não sabe

50
00:03:42,160 --> 00:03:47,950
qual usuário como favoritos deve ser mostrado aqui e a página de contato como de costume.

51
00:03:47,950 --> 00:03:49,710
Agora, vamos entrar.

52
00:03:49,710 --> 00:03:51,555
Para fazer login em nosso aplicativo,

53
00:03:51,555 --> 00:03:58,020
vamos clicar no botão de login e, em seguida, você verá que a caixa de diálogo de login aparece.

54
00:03:58,020 --> 00:04:04,989
Então deixe-me fazer login como um dos usuários registrados,

55
00:04:04,989 --> 00:04:09,650
que registramos como parte deste curso anteriormente.

56
00:04:09,650 --> 00:04:11,445
Então, uma vez que você entrar,

57
00:04:11,445 --> 00:04:16,530
você notará imediatamente que, no canto direito,

58
00:04:16,530 --> 00:04:19,760
você vê que o botão de login agora se transformou em

59
00:04:19,760 --> 00:04:24,200
logout e o nome do usuário é indicado aqui.

60
00:04:24,200 --> 00:04:26,810
Então, quem está logado é indicado aqui.

61
00:04:26,810 --> 00:04:33,280
Você também pode, em princípio, substituir isso pela imagem do usuário.

62
00:04:33,280 --> 00:04:36,080
Agora, para isso você precisa fazer mais modificações

63
00:04:36,080 --> 00:04:40,290
tanto para o cliente quanto para o servidor, a fim de suportar a exibição da imagem aqui.

64
00:04:40,290 --> 00:04:42,160
Mas no momento, estou apenas mostrando a vocês,

65
00:04:42,160 --> 00:04:46,640
como podemos facilmente exibir as informações do usuário aqui.

66
00:04:46,640 --> 00:04:50,405
Então, isso exigiu pequena modificação para a cabeça do componente,

67
00:04:50,405 --> 00:04:54,010
onde eu serei capaz de recuperar o nome de usuário.

68
00:04:54,010 --> 00:04:56,225
Então, uma vez que o usuário faz login,

69
00:04:56,225 --> 00:04:59,060
então, se você agora clicar em Meus Favoritos, você

70
00:04:59,060 --> 00:05:02,185
notaria que não há nada em Meus Favoritos para o usuário.

71
00:05:02,185 --> 00:05:07,635
Obviamente porque o usuário ainda não escolheu nenhum favorito.

72
00:05:07,635 --> 00:05:09,880
Então, vamos agora para o menu.

73
00:05:09,880 --> 00:05:11,520
Então, no menu,

74
00:05:11,520 --> 00:05:19,820
deixe-me selecionar um item e, em seguida, adicionaremos este prato aos nossos favoritos.

75
00:05:19,820 --> 00:05:22,065
Então, indo abaixo aqui,

76
00:05:22,065 --> 00:05:25,250
você verá o símbolo do coração lá,

77
00:05:25,250 --> 00:05:29,555
clique nele, e você verá que isso seria adicionado aos favoritos.

78
00:05:29,555 --> 00:05:32,000
O fato de que isso foi adicionado aos favoritos,

79
00:05:32,000 --> 00:05:39,550
é indicado pela mudança no ícone aqui de um coração não preenchido para um coração cheio.

80
00:05:39,550 --> 00:05:42,615
Agora, se você for a qualquer outro prato,

81
00:05:42,615 --> 00:05:46,005
você notaria que este tem um coração não preenchido,

82
00:05:46,005 --> 00:05:49,685
o que significa que este ainda não está entre os nossos favoritos.

83
00:05:49,685 --> 00:05:51,920
Então, deixe-me adicionar mais um item aos

84
00:05:51,920 --> 00:05:56,950
meus favoritos e, em seguida, vamos adicionar um terceiro item aos meus favoritos também.

85
00:05:56,950 --> 00:06:04,265
Então, agora, você verá que se eu for agora aos meus favoritos,

86
00:06:04,265 --> 00:06:09,390
você verá um conjunto de Meus Favoritos sendo exibido aqui.

87
00:06:09,390 --> 00:06:12,470
Então, você viu que eu acabei de adicionar estes três pratos

88
00:06:12,470 --> 00:06:15,580
aos meus favoritos e assim estes estão sendo exibidos aqui.

89
00:06:15,580 --> 00:06:18,800
Então, isso é rastreado usando

90
00:06:18,800 --> 00:06:23,240
esse ponto de extremidade favoritos

91
00:06:23,240 --> 00:06:26,670
no lado do servidor, o que implementado como parte da sua última atribuição.

92
00:06:26,670 --> 00:06:29,090
Então, se você fez essa atribuição corretamente,

93
00:06:29,090 --> 00:06:32,389
então esta parte deve funcionar como esperado.

94
00:06:32,389 --> 00:06:36,255
Agora, também podemos modificar Meu Favorito.

95
00:06:36,255 --> 00:06:40,530
Então, deixe-me ir em frente e excluir um dos itens de Meus Favoritos.

96
00:06:40,530 --> 00:06:43,795
Então, quando eu clicar nesse botão você vai notar imediatamente que,

97
00:06:43,795 --> 00:06:48,935
que o item é excluído de Meus Favoritos e imediatamente desaparece e

98
00:06:48,935 --> 00:06:54,120
meus favoritos é atualizado e você vê o valor resultante sendo mostrado aqui.

99
00:06:54,120 --> 00:06:57,200
Portanto, observe que os Meus Favoritos serão exibidos somente

100
00:06:57,200 --> 00:07:01,785
para usuários que estão conectados ao sistema.

101
00:07:01,785 --> 00:07:07,250
Então, você percebe imediatamente um conjunto de alterações que foram

102
00:07:07,250 --> 00:07:09,635
feitas para o cliente, a fim de suportar

103
00:07:09,635 --> 00:07:12,440
alguns desses recursos adicionais que você vê aqui.

104
00:07:12,440 --> 00:07:16,690
Você também viu o recurso de login e logout sendo suportado aqui.

105
00:07:16,690 --> 00:07:18,530
Então, quando eu clico no botão de logout,

106
00:07:18,530 --> 00:07:22,445
você percebe imediatamente que o usuário é desconectado e

107
00:07:22,445 --> 00:07:25,520
o nome de usuário desaparece de lá e

108
00:07:25,520 --> 00:07:29,375
assim o botão também é transformado no botão de login.

109
00:07:29,375 --> 00:07:34,880
Agora, então, com isso você percebe como meu cliente foi

110
00:07:34,880 --> 00:07:39,960
atualizado para fazer uso do novo servidor de API REST,

111
00:07:39,960 --> 00:07:44,180
a fim de suportar os favoritos que estão sendo salvos no lado do servidor e, em

112
00:07:44,180 --> 00:07:50,140
seguida, sendo automaticamente refletido em Meu aplicativo Cliente, como mostrado aqui.

113
00:07:50,140 --> 00:07:55,190
Agora, que você já viu o aplicativo React modificado em ação,

114
00:07:55,190 --> 00:07:58,250
é hora de fazer uma visita ao código-fonte para ver como

115
00:07:58,250 --> 00:08:01,340
exatamente ele é implementado e quais são as mudanças

116
00:08:01,340 --> 00:08:07,875
que fizemos correspondentes ao aplicativo Redux no final do curso Redux.

117
00:08:07,875 --> 00:08:10,760
Agora, as duas grandes mudanças que você vai notar,

118
00:08:10,760 --> 00:08:16,070
é o suporte para favoritos e também o suporte de autenticação,

119
00:08:16,070 --> 00:08:19,680
o login do usuário e suporte para logout.

120
00:08:19,680 --> 00:08:21,770
Agora, como estes são implementados?

121
00:08:21,770 --> 00:08:27,720
Começaremos a nossa jornada na parte Redux da nossa aplicação.

122
00:08:27,720 --> 00:08:29,580
Então, indo para a parte Redux,

123
00:08:29,580 --> 00:08:31,585
vamos visitar os tipos de ação.

124
00:08:31,585 --> 00:08:35,255
Em tipos de ação, você verá agora que temos

125
00:08:35,255 --> 00:08:40,210
três novos tipos de ação relacionados aos seus favoritos.

126
00:08:40,210 --> 00:08:41,750
Então, você veria favoritos carregando,

127
00:08:41,750 --> 00:08:43,500
favoritos falharam e adicionar favoritos,

128
00:08:43,500 --> 00:08:47,270
que como você esperaria estar lá.

129
00:08:47,270 --> 00:08:57,355
Em seguida, também seis tipos de ação diferentes relacionados ao seu processo de login e logout.

130
00:08:57,355 --> 00:09:00,320
Agora, para que você possa ver solicitação de login, sucesso de login,

131
00:09:00,320 --> 00:09:02,210
falha de login, solicitação de logout,

132
00:09:02,210 --> 00:09:03,810
sucesso de logout e falha.

133
00:09:03,810 --> 00:09:10,535
Então, vamos ver como esses tipos de ação são realmente usados em nossa criação de ação.

134
00:09:10,535 --> 00:09:12,620
Então, indo para os criadores de ação,

135
00:09:12,620 --> 00:09:17,600
então é aqui que você verá o suporte para os favoritos aqui.

136
00:09:17,600 --> 00:09:22,070
Então, primeiro examinaremos o suporte para favoritos e, em seguida,

137
00:09:22,070 --> 00:09:26,790
examinaremos o suporte para o suporte de autenticação.

138
00:09:26,790 --> 00:09:32,630
Então, aqui, você verá que temos novos métodos abaixo

139
00:09:32,630 --> 00:09:39,160
aqui chamados como FavoritesLoading, FavoritesFailed e addFavorites.

140
00:09:39,160 --> 00:09:41,550
Agora, a partir de suas experiências anteriores

141
00:09:41,550 --> 00:09:45,950
dishesLoading e dishesFailed e addDishes e assim por diante.

142
00:09:45,950 --> 00:09:48,650
Então, essas coisas são muito familiares para você, de

143
00:09:48,650 --> 00:09:54,090
modo que é exatamente o mesmo tipo de configuração para o código aqui.

144
00:09:54,090 --> 00:09:58,170
Além disso, você verá outro método aqui chamado FetchFavorites,

145
00:09:58,170 --> 00:10:01,780
que é novamente como eu disse um tanque Redux,

146
00:10:01,780 --> 00:10:03,630
que é implementado aqui,

147
00:10:03,630 --> 00:10:11,040
onde vamos usar a busca para acessar o servidor para buscar os favoritos.

148
00:10:11,040 --> 00:10:15,580
Então, estes são os métodos que você verá aqui e, em seguida, também você verá

149
00:10:15,580 --> 00:10:21,270
DeleteFavorite aqui e também um tanque Redux para PostFavorite aqui.

150
00:10:21,270 --> 00:10:24,050
Então, no PostFavorite como você esperaria,

151
00:10:24,050 --> 00:10:28,130
você estaria postando o favorito para o servidor aqui.

152
00:10:28,130 --> 00:10:35,730
Então, observe aqui como estamos usando autorização.

153
00:10:35,730 --> 00:10:39,760
Sendo configurado em nosso cabeçalho de autorização, então,

154
00:10:39,760 --> 00:10:43,710
isso é algo que eu chamaria sua atenção neste momento,

155
00:10:43,710 --> 00:10:50,940
voltaremos a isso novamente quando olharmos para a autenticação e autorização do usuário.

156
00:10:50,940 --> 00:10:55,820
Então, estamos configurando o cabeçalho de autorização como este usando buscar aqui.

157
00:10:55,820 --> 00:11:00,620
Então, para buscar, estamos postando um item na busca

158
00:11:00,620 --> 00:11:06,845
aqui e então você vai notar que a estrutura de como a busca é feita é dada aqui.

159
00:11:06,845 --> 00:11:13,735
Agora sempre que você postar um favorito ou excluir um favorito ou buscar um favorito,

160
00:11:13,735 --> 00:11:17,825
nós sempre teremos o servidor devolvido para você,

161
00:11:17,825 --> 00:11:22,545
todo o conjunto de favoritos e então nós simplesmente adicionaremos esses favoritos

162
00:11:22,545 --> 00:11:29,185
em nossa loja redux aqui, então é isso que estamos fazendo aqui.

163
00:11:29,185 --> 00:11:33,585
Novamente, a estrutura de código deve parecer muito familiar para você,

164
00:11:33,585 --> 00:11:37,070
se você simplesmente olhar para como o favorito da postagem,

165
00:11:37,070 --> 00:11:41,600
o favorito excluir e os favoritos da busca são implementados.

166
00:11:41,600 --> 00:11:45,665
Então, tudo isso irá lidar com a questão dos favoritos.

167
00:11:45,665 --> 00:11:49,520
Agora, como exatamente os próprios favoritos são implementados?

168
00:11:49,520 --> 00:11:52,950
Então, a função redutor é implementada na estrutura favorita aqui.

169
00:11:52,950 --> 00:11:54,875
Então, dentro desta função reduzida,

170
00:11:54,875 --> 00:11:57,570
você verá como lidamos com a adição de

171
00:11:57,570 --> 00:11:59,760
favoritos, carregamento de favoritos e favoritos falhou aqui.

172
00:11:59,760 --> 00:12:04,120
Novamente, o código deve parecer muito familiar para você com base em

173
00:12:04,120 --> 00:12:10,300
sua experiência com as funções redutoras que você já viu para redux antes.

174
00:12:10,300 --> 00:12:18,850
Então, novamente preste um pouco de atenção à forma como o código é implementado.

175
00:12:18,850 --> 00:12:21,130
Isso é bastante simples, então eu não estou gastando

176
00:12:21,130 --> 00:12:24,610
muito tempo explicando como essas coisas são implementadas.

177
00:12:24,610 --> 00:12:27,720
Agora, aproveitando estes,

178
00:12:27,720 --> 00:12:30,895
temos nos componentes que agora temos

179
00:12:30,895 --> 00:12:37,630
um novo componente favoritos cujo trabalho é renderizar toda a lista de nossos favoritos.

180
00:12:37,630 --> 00:12:41,380
Então, aqui você vê que o componente de favoritos em si,

181
00:12:41,380 --> 00:12:44,790
a estrutura do componente de favoritos é muito semelhante à

182
00:12:44,790 --> 00:12:49,460
estrutura do componente de menu então aqui temos

183
00:12:49,460 --> 00:12:56,900
o componente de favoritos que é implementado como um componente funcional e

184
00:12:56,900 --> 00:13:05,575
lá estamos renderizando os favoritos em aqui como você vê no código aqui.

185
00:13:05,575 --> 00:13:08,460
Novamente, muito simples eu acho que você deve ser capaz de

186
00:13:08,460 --> 00:13:12,190
entender facilmente como o componente de favoritos é

187
00:13:12,190 --> 00:13:18,835
implementado tendo tido experiência com como o componente de menu é implementado lá.

188
00:13:18,835 --> 00:13:22,920
Então, novamente eu não estou gastando muito tempo explicando código aqui.

189
00:13:22,920 --> 00:13:26,605
Agora analisar o código também é

190
00:13:26,605 --> 00:13:32,280
uma boa experiência para você aprender como o código é implementado, então

191
00:13:32,280 --> 00:13:37,880
processar este código em sua própria cabeça irá ajudá-lo a entender novamente

192
00:13:37,880 --> 00:13:43,790
para consolidar sua compreensão de reagir com mais detalhes.

193
00:13:43,790 --> 00:13:46,085
Então, vou deixar isso como um exercício para você.

194
00:13:46,085 --> 00:13:49,150
Agora estou apontando onde as alterações foram

195
00:13:49,150 --> 00:13:53,380
feitas para implementar o suporte para favoritos.

196
00:13:53,380 --> 00:13:54,840
Agora o termo favorito,

197
00:13:54,840 --> 00:13:56,630
favoritos também é alavancagem

198
00:13:56,630 --> 00:13:59,995
no componente detalhe prato e dentro do componente detalhe prato,

199
00:13:59,995 --> 00:14:08,830
você vai ver que temos o adicional- Aqui,

200
00:14:08,830 --> 00:14:14,799
no componente funcional prato renderizar,

201
00:14:14,799 --> 00:14:19,360
estaremos renderizando o botão que suporta

202
00:14:19,360 --> 00:14:27,595
a seleção ou quando você clicar no contorno do coração,

203
00:14:27,595 --> 00:14:33,440
ele irá adicionar esse item específico em sua lista de favoritos.

204
00:14:33,440 --> 00:14:37,815
Então, tudo isso é suportado aqui usando este botão aqui que

205
00:14:37,815 --> 00:14:44,200
invoca como você vê esta função chamada post favorito que é o redux.

206
00:14:44,200 --> 00:14:47,900
Obrigado que temos implementado lá e este suporte para isso

207
00:14:47,900 --> 00:14:51,925
é implementado nos componentes principais para que quando você vai para o componente principal,

208
00:14:51,925 --> 00:14:56,720
você vai ver como o favorito post é implementado aqui

209
00:14:56,720 --> 00:15:00,230
e você também vai ver que isso está

210
00:15:00,230 --> 00:15:04,540
incluído no mapa enviado para adereços e assim o post favorito implementado.

211
00:15:04,540 --> 00:15:07,580
Então, você vê que a estruturação é muito a

212
00:15:07,580 --> 00:15:11,910
mesma que você viu para o outro código lá.

213
00:15:11,910 --> 00:15:18,295
Então, eu não vou gastar muito tempo em como o suporte de favoritos é implementado,

214
00:15:18,295 --> 00:15:21,400
em vez disso deixe-me gastar um pouco mais de tempo em como

215
00:15:21,400 --> 00:15:27,705
a autorização do usuário e autenticação é suportada no código aqui.

216
00:15:27,705 --> 00:15:29,765
Agora, para a autenticação do usuário,

217
00:15:29,765 --> 00:15:35,810
o que estamos fazendo aqui é que quando você entrar na loja de configuração aqui,

218
00:15:35,810 --> 00:15:42,530
você verá que eu tenho mais uma função redutor chamada Auth que é implementada aqui.

219
00:15:42,530 --> 00:15:49,670
Então, isso rastreará a parte de autorização.

220
00:15:49,670 --> 00:15:51,380
Agora, como isso é implementado?

221
00:15:51,380 --> 00:15:53,910
Mais uma vez, entrando em criadores de

222
00:15:53,910 --> 00:16:01,070
ação, tipos de inação já vimos o conjunto de ações relacionadas ao login e logout.

223
00:16:01,070 --> 00:16:02,985
Então, entrando em criadores de ação,

224
00:16:02,985 --> 00:16:05,980
você verá que aqui em cima temos

225
00:16:05,980 --> 00:16:10,620
todas as funções que são implementadas para fazer login e logout.

226
00:16:10,620 --> 00:16:18,405
Então, você verá uma nova função chamada login de solicitação, receber log,

227
00:16:18,405 --> 00:16:25,765
e assim estes são quando o login é bem sucedido e assim por diante, mas em

228
00:16:25,765 --> 00:16:35,930
particular, esta função particular aqui do usuário de login é onde começamos com o processo de login.

229
00:16:35,930 --> 00:16:40,955
Então, vamos despachar o login de solicitação no ponto em que o usuário tenta fazer login,

230
00:16:40,955 --> 00:16:46,010
depois disso vamos fazer uma busca para os usuários barra ponto final de login com

231
00:16:46,010 --> 00:16:52,455
o post e isso contém no corpo da mensagem as credenciais para o usuário aqui.

232
00:16:52,455 --> 00:16:54,445
Então, uma vez que fazemos a busca,

233
00:16:54,445 --> 00:16:58,570
se a resposta for retornada corretamente,

234
00:16:58,570 --> 00:17:02,330
então a resposta deve conter o token lá.

235
00:17:02,330 --> 00:17:08,545
Então, vamos processar essa resposta aqui e então se o login foi bem sucedido,

236
00:17:08,545 --> 00:17:15,790
então vamos armazenar o token no armazenamento local aqui.

237
00:17:15,790 --> 00:17:18,210
Então, você pode ver que estamos dizendo LocalStorage definir

238
00:17:18,210 --> 00:17:21,600
token de resposta de token de item e, em seguida,

239
00:17:21,600 --> 00:17:27,830
também vamos armazenar as credenciais do usuário no armazenamento local aqui.

240
00:17:27,830 --> 00:17:34,045
Então, esses dois vão me ajudar a rastrear o processo de login do usuário.

241
00:17:34,045 --> 00:17:39,600
Depois disso, enviaremos o login de recebimento.

242
00:17:39,600 --> 00:17:44,150
Agora, neste ponto, quando o usuário está logado com sucesso,

243
00:17:44,150 --> 00:17:46,645
também vamos buscar os favoritos para o usuário.

244
00:17:46,645 --> 00:17:51,975
Agora lembre-se de que você só pode buscar os favoritos para um usuário que está conectado.

245
00:17:51,975 --> 00:17:55,110
Quando nenhum usuário está conectado, não há favoritos a serem buscados,

246
00:17:55,110 --> 00:17:58,110
mas quando o usuário fizer login com sucesso, você deseja buscar

247
00:17:58,110 --> 00:18:02,250
o favorito do usuário para que ele possa exibir isso em seu aplicativo reagir.

248
00:18:02,250 --> 00:18:04,520
Então, é por isso que eu também estou fazendo um buscar favoritos

249
00:18:04,520 --> 00:18:07,505
aqui e, em seguida, vamos receber o login aqui.

250
00:18:07,505 --> 00:18:12,050
Então, se houver um erro, enviaremos o erro de login aqui.

251
00:18:12,050 --> 00:18:18,080
Então, todas essas funções o login de recepção e erro de login irá

252
00:18:18,080 --> 00:18:25,020
então invocar as funções redutor apropriadas que são implementadas no arquivo Auth.Js.

253
00:18:25,020 --> 00:18:27,260
Então, indo para o arquivo Auth.Js,

254
00:18:27,260 --> 00:18:33,660
o estado aqui rastreia o status de login do usuário aqui.

255
00:18:33,660 --> 00:18:36,930
Então, aqui nós também vamos armazenar no estado,

256
00:18:36,930 --> 00:18:40,740
o estado envolve o leste carregamento booleano que

257
00:18:40,740 --> 00:18:46,160
rastreia se você está no processo de login. A facilidade de autenticação -

258
00:18:46,160 --> 00:18:53,850
Indica se o usuário está autenticado e assim o usuário está logado,

259
00:18:53,850 --> 00:18:57,200
assim você será capaz de permitir que o usuário.

260
00:18:57,200 --> 00:19:00,060
Então, esse sinalizador é usado em muitas circunstâncias

261
00:19:00,060 --> 00:19:03,970
para exibir o status de login do usuário e, em seguida, também

262
00:19:03,970 --> 00:19:11,340
a propriedade do usuário para o estado rastreia as credenciais do usuário.

263
00:19:11,340 --> 00:19:16,135
Então, é aí que vamos obter o nome de usuário para exibição em nosso componente de cabeçalho.

264
00:19:16,135 --> 00:19:25,310
Agora, aqui você verá a solicitação de login e quando o sucesso do login for acionado,

265
00:19:25,310 --> 00:19:31,695
então você armazenará o valor do token aqui e, em seguida, a falha de login.

266
00:19:31,695 --> 00:19:35,235
O pedido de logout, logout com sucesso,

267
00:19:35,235 --> 00:19:45,140
todos estes são manipulados por estas várias partes dentro deste redutor o redutor auth.js aqui.

268
00:19:45,140 --> 00:19:51,705
Então, é assim que a autenticação do usuário é tratada aqui.

269
00:19:51,705 --> 00:19:54,055
Agora, no componente de cabeçalho,

270
00:19:54,055 --> 00:19:55,770
indo para o componente de cabeçalho,

271
00:19:55,770 --> 00:20:00,040
então este é o lugar onde temos a função de login aqui.

272
00:20:00,040 --> 00:20:02,460
Então, o HandleLogin, você se lembra que

273
00:20:02,460 --> 00:20:05,545
já implementamos isso no curso de reagir.

274
00:20:05,545 --> 00:20:09,330
No HandleLogin, eles vão alternar o modal.

275
00:20:09,330 --> 00:20:14,340
Então, vamos fechar o modal e, em seguida, vamos fazer login no usuário neste ponto.

276
00:20:14,340 --> 00:20:18,810
Então, vamos dizer isso.props LoginUser e então você verá que as credenciais,

277
00:20:18,810 --> 00:20:22,710
nome de usuário e senha são passados como os parâmetros para

278
00:20:22,710 --> 00:20:27,115
o LoginUser e de modo que entra no func LoginUser,

279
00:20:27,115 --> 00:20:30,400
que então cuida de fazer login no usuário.

280
00:20:30,400 --> 00:20:34,930
Agora, como você exibe o estado de login do usuário.

281
00:20:34,930 --> 00:20:36,785
Então, isso é muito simples novamente.

282
00:20:36,785 --> 00:20:38,870
Na barra de navegação aqui,

283
00:20:38,870 --> 00:20:42,900
você verá que eu adicionei em um novo item aqui.

284
00:20:42,900 --> 00:20:47,900
Então, é aqui que vamos dizer this.props.auth.IsAuthenticated.

285
00:20:47,900 --> 00:20:54,280
Então, o sinalizador IsAuthenticated está sendo usado aqui por mim e então se isso é definido como true,

286
00:20:54,280 --> 00:20:55,845
então eu vou exibir

287
00:20:55,845 --> 00:21:04,910
o botão Logout aqui e então isso é o que eu vou exibir aqui.

288
00:21:04,910 --> 00:21:07,110
Caso contrário, exibirei o botão de login.

289
00:21:07,110 --> 00:21:09,890
Então, usando esse sinalizador IsAuthenticated,

290
00:21:09,890 --> 00:21:14,435
eu estou invertendo qual botão específico será exibido

291
00:21:14,435 --> 00:21:20,520
no cabeçalho lá se você exibir o botão de logout ou o botão de login.

292
00:21:20,520 --> 00:21:24,290
Então, esse é o ponto que estamos exibindo aqui.

293
00:21:24,290 --> 00:21:29,240
Então, o login ou o logout aqui.

294
00:21:29,240 --> 00:21:34,690
Então, é assim que estamos lidando com o processo de login e logout

295
00:21:34,690 --> 00:21:40,935
aqui e também estaremos exibindo o nome de usuário bem ali.

296
00:21:40,935 --> 00:21:43,245
Então, quando você exibir o botão de logout,

297
00:21:43,245 --> 00:21:48,585
você também verá que estamos exibindo o nome do usuário lá.

298
00:21:48,585 --> 00:21:54,290
Então, abaixo aqui,

299
00:21:54,290 --> 00:21:59,720
vamos também exibir o botão handleLogout e,

300
00:21:59,720 --> 00:22:06,490
em seguida, temos o botão logout sendo exibido aqui.

301
00:22:06,490 --> 00:22:09,650
Além disso, esta declaração particular aqui,

302
00:22:09,650 --> 00:22:13,280
é assim que estamos exibindo o nome de usuário aqui.

303
00:22:13,280 --> 00:22:17,760
Então, isso usa o this.props.auth.user.username.

304
00:22:17,760 --> 00:22:24,110
Então, a propriedade de usuário no estado de autenticação contém

305
00:22:24,110 --> 00:22:27,290
as credenciais de usuário e de lá eu busquei o nome de usuário e, em seguida, eu

306
00:22:27,290 --> 00:22:30,980
uso isso para exibir isso na barra de cabeçalho.

307
00:22:30,980 --> 00:22:34,190
Então é assim que o componente de cabeçalho é

308
00:22:34,190 --> 00:22:38,170
atualizado, a fim de lidar com o processo de login e logout.

309
00:22:38,170 --> 00:22:41,610
Novamente, maneiras bastante simples de implementar,

310
00:22:41,610 --> 00:22:44,490
é uma maneira bastante simples que eu implementei aqui.

311
00:22:44,490 --> 00:22:49,765
Agora, obviamente, se você quiser uma maneira mais complexa de lidar com o processo de login e logout,

312
00:22:49,765 --> 00:22:54,120
certamente você pode entrar na maneira completa de fazer as coisas,

313
00:22:54,120 --> 00:22:58,160
mas isso é suficiente para atender aos requisitos para a minha aplicação.

314
00:22:58,160 --> 00:23:01,650
Então, eu implementei o processo de login e logout de

315
00:23:01,650 --> 00:23:06,970
uma maneira muito simples aqui usando a ajuda da loja Redux.

316
00:23:06,970 --> 00:23:09,440
Então, por Redux loja em si está rastreando

317
00:23:09,440 --> 00:23:15,455
meu status de login se eu estou logado e eu estou autenticado e se eu estou desconectado.

318
00:23:15,455 --> 00:23:17,020
Então, se o usuário estiver desconectado,

319
00:23:17,020 --> 00:23:19,325
os Meus Favoritos não serão mostrados aqui.

320
00:23:19,325 --> 00:23:24,090
Agora, um ponto importante que você vai perguntar é,

321
00:23:24,090 --> 00:23:31,990
como nós garantimos que nós não entramos no estado favorito aqui?

322
00:23:31,990 --> 00:23:39,530
Então, isso é tratado no lugar onde lidamos com as rotas aqui.

323
00:23:39,530 --> 00:23:42,640
Então, você notará que para os favoritos aqui,

324
00:23:42,640 --> 00:23:46,880
declaramos para os favoritos o endpoint em vez de

325
00:23:46,880 --> 00:23:51,080
chamar isso como a rota que chamamos como uma rota privada.

326
00:23:51,080 --> 00:23:55,590
Assim, a rota privada permite que você garanta que você terá

327
00:23:55,590 --> 00:24:00,500
permissão para entrar nessa parte apenas

328
00:24:00,500 --> 00:24:02,870
em circunstâncias, onde o usuário está logado.

329
00:24:02,870 --> 00:24:09,600
Então, isso impedirá uma navegação para o endpoint /favorites se nenhum usuário estiver conectado.

330
00:24:09,600 --> 00:24:12,055
Agora, como essa rota privada é implementada?

331
00:24:12,055 --> 00:24:16,020
Esta rota privada está implementada aqui em cima.

332
00:24:16,020 --> 00:24:19,635
Então, você pode ver que esta rota privada é implementada como mostrado aqui.

333
00:24:19,635 --> 00:24:24,070
Então, isso não é nada além de uma rota aqui e, em seguida, aqui,

334
00:24:24,070 --> 00:24:28,670
vamos implementar this.props.auth.IsAuthenticated.

335
00:24:28,670 --> 00:24:30,620
Então, se o usuário for autenticado,

336
00:24:30,620 --> 00:24:35,100
então eu permitirei navegar para

337
00:24:35,100 --> 00:24:40,890
o componente que é o componente favorito.

338
00:24:40,890 --> 00:24:45,130
Caso contrário, eu simplesmente redirecionarei para o componente doméstico.

339
00:24:45,130 --> 00:24:46,790
Então, se nenhum usuário estiver conectado,

340
00:24:46,790 --> 00:24:49,900
vou simplesmente redirecionar para o componente home e assim isso é

341
00:24:49,900 --> 00:24:54,230
implementado usando esta rota privada que eu projetei aqui.

342
00:24:54,230 --> 00:25:00,270
Então, a rota privada é algo que é suportado pelo roteador

343
00:25:00,270 --> 00:25:06,750
que usamos o roteador React Dom que usamos em nosso aplicativo React.

344
00:25:06,750 --> 00:25:10,300
Então, uma maneira muito simples de lidar com situações,

345
00:25:10,300 --> 00:25:16,425
onde você não quer que certas rotas sejam navegadas para quando o usuário não está logado.

346
00:25:16,425 --> 00:25:21,610
Então, novamente, algumas mudanças simples que eu fiz para

347
00:25:21,610 --> 00:25:23,080
o aplicativo para facilitar

348
00:25:23,080 --> 00:25:27,360
todos os diferentes recursos que você vê em seu aplicativo React.

349
00:25:27,360 --> 00:25:29,270
Agora, como você

350
00:25:29,270 --> 00:25:31,115
poderia esperar, você pode estar desiludido neste ponto,

351
00:25:31,115 --> 00:25:34,630
“É tão simples de implementar” e, de fato, é

352
00:25:34,630 --> 00:25:39,005
exatamente isso que foi feito para suportar todos os novos recursos.

353
00:25:39,005 --> 00:25:42,700
Como você pode ver, autenticação do usuário e login e

354
00:25:42,700 --> 00:25:47,470
processo de logout desde o nosso servidor tem suporte completo para tudo,

355
00:25:47,470 --> 00:25:51,800
implementando o acompanhamento do lado do cliente do

356
00:25:51,800 --> 00:25:57,290
processo de login e logout do usuário e tudo o que se torna bastante simples, apenas

357
00:25:57,290 --> 00:25:59,980
modificando alguns dos componentes e adicionando

358
00:25:59,980 --> 00:26:09,015
a função de redutor de autenticação e adicionando no estado de autenticação à nossa loja Redux.

359
00:26:09,015 --> 00:26:13,010
Todo o processo de manipulação da autenticação do usuário

360
00:26:13,010 --> 00:26:17,885
e login e logout torna-se bastante simples neste caso.

361
00:26:17,885 --> 00:26:23,055
Então, com este rápido tour do código React atualizado,

362
00:26:23,055 --> 00:26:25,820
vamos continuar a examinar

363
00:26:25,820 --> 00:26:30,415
nosso aplicativo React mais alguns recursos do nosso aplicativo React.

364
00:26:30,415 --> 00:26:33,650
Então, novamente, voltando para a nossa aplicação,

365
00:26:33,650 --> 00:26:36,580
agora podemos ir para o menu e, em seguida, puxar

366
00:26:36,580 --> 00:26:41,080
qualquer prato aqui e eu posso postar comentários para o prato aqui,

367
00:26:41,080 --> 00:26:49,020
então eu iria imediatamente configurar a classificação aqui e meu valor comentário aqui.

368
00:26:50,020 --> 00:26:59,950
Observe que eu não estou inserindo meu nome de usuário ou o nome do meu autor aqui no formulário aqui.

369
00:26:59,950 --> 00:27:03,820
Agora, é claro, para enviar um comentário, você precisa estar logado.

370
00:27:03,820 --> 00:27:08,765
Então, se você não está logado neste comentário não será aceito pelo meu servidor.

371
00:27:08,765 --> 00:27:11,165
Então, deixe-me primeiro entrar.

372
00:27:11,165 --> 00:27:17,140
Então, eu posso entrar aqui

373
00:27:17,140 --> 00:27:19,965
e no momento em que eu entrar você imediatamente notar que

374
00:27:19,965 --> 00:27:23,485
barra de ferramentas cabeçalho é atualizado para indicar o meu status.

375
00:27:23,485 --> 00:27:28,255
Agora, eu posso postar este comentário e você notaria que quando eu postar

376
00:27:28,255 --> 00:27:30,670
o comentário, o comentário é adicionado na lista dos comentários

377
00:27:30,670 --> 00:27:33,120
e também notar que o campo autor é

378
00:27:33,120 --> 00:27:38,285
automaticamente preenchido aqui porque é assim que nós configuramos nosso lado servidor.

379
00:27:38,285 --> 00:27:39,810
No campo de comentários,

380
00:27:39,810 --> 00:27:44,680
nós configuramos nosso usuário como uma referência para

381
00:27:44,680 --> 00:27:48,580
as informações do usuário que armazenamos em

382
00:27:48,580 --> 00:27:53,060
nosso lado do servidor e desde que usamos o preenchimento Mangusto no lado do servidor,

383
00:27:53,060 --> 00:27:55,555
as informações do usuário são automaticamente

384
00:27:55,555 --> 00:27:58,230
preenchidas nos comentários recebidos do lado do servidor.

385
00:27:58,230 --> 00:28:02,350
Então, é assim que você percebe como eu estou aproveitando

386
00:28:02,350 --> 00:28:07,560
o que o servidor já fornece para que eu preencha automaticamente os detalhes.

387
00:28:08,290 --> 00:28:12,665
Assim, pequenas mudanças novamente até mesmo

388
00:28:12,665 --> 00:28:20,420
na página de detalhes do prato para refletir o uso do suporte de comentários no site do servidor.

389
00:28:20,420 --> 00:28:22,370
Com isso,

390
00:28:22,370 --> 00:28:29,415
concluo a ilustração rápida do cliente React que implementamos como parte

391
00:28:29,415 --> 00:28:33,445
deste exercício e espero que você

392
00:28:33,445 --> 00:28:37,690
passe pelos detalhes do código no cliente também e depois

393
00:28:37,690 --> 00:28:41,560
reflita sobre o que você aprendeu no curso React e veja como

394
00:28:41,560 --> 00:28:46,230
as modificações nos permitem implementar em um modificado,

395
00:28:46,230 --> 00:28:51,390
[inaudível] que agora é capaz de se comunicar com o servidor e, em seguida, suportar todos os recursos que

396
00:28:51,390 --> 00:28:58,770
originalmente pretendíamos implementar como parte do nosso cliente e do lado do servidor.