1
00:00:03,650 --> 00:00:08,090
Теперь, когда мы завершили обновление на стороне сервера.

2
00:00:08,090 --> 00:00:11,045
Пришло время перейти к ответному клиенту.

3
00:00:11,045 --> 00:00:15,060
Для вашего удобства я предоставил вам репозиторий GitHub,

4
00:00:15,060 --> 00:00:20,330
который содержит окончательную версию клиента, который может общаться с

5
00:00:20,330 --> 00:00:26,300
нашим сервером REST API, а затем отображать различные представления для нашего клиента.

6
00:00:26,300 --> 00:00:30,095
Итак, я взял повторное приложение, которое мы разработали во

7
00:00:30,095 --> 00:00:34,040
втором курсе специализации, а затем модифицировал его.

8
00:00:34,040 --> 00:00:39,175
Мы проведем небольшую экскурсию по коду чуть позже.

9
00:00:39,175 --> 00:00:43,520
Теперь вы клонируете репозиторий Git на свой компьютер,

10
00:00:43,520 --> 00:00:49,955
а затем запустите свой клиент, а затем увидите, что он взаимодействует с нашим набором серверов.

11
00:00:49,955 --> 00:00:53,655
Давайте посмотрим подробности дальше.

12
00:00:53,655 --> 00:00:56,985
Чтобы начать с этого упражнения,

13
00:00:56,985 --> 00:01:00,460
на вашем терминале или командном окне,

14
00:01:00,460 --> 00:01:06,429
перейдите в удобное расположение, а затем в командной строке введите git clone

15
00:01:06,429 --> 00:01:22,280
https://github.com/jmuppala/conFusion-React.git, а затем позвольте

16
00:01:22,280 --> 00:01:27,315
приложению React быть клонировано на ваш компьютер.

17
00:01:27,315 --> 00:01:29,210
После завершения клонирования

18
00:01:29,210 --> 00:01:34,350
перейдите в папку Confusion-React, которая

19
00:01:34,350 --> 00:01:38,625
только что была создана при клонировании этого репозитория Git.

20
00:01:38,625 --> 00:01:43,965
Затем вы сразу заметите, что есть куча файлов уже там.

21
00:01:43,965 --> 00:01:50,565
Теперь, в подсказке, введите install,

22
00:01:50,565 --> 00:01:54,350
чтобы установить все модули узла, от

23
00:01:54,350 --> 00:01:58,155
которых зависит это приложение React.

24
00:01:58,155 --> 00:02:03,140
Итак, как только модули узла будут установлены,

25
00:02:03,140 --> 00:02:11,810
тогда мы можем запустить наш запуск пряжи для компиляции и обслуживания нашего приложения React.

26
00:02:11,810 --> 00:02:13,840
Как только все будет в,

27
00:02:13,840 --> 00:02:18,650
убедитесь, что ваш сервер MongoDB

28
00:02:18,650 --> 00:02:23,775
работает и работает, а также ваш сервер REST API также работает и работает.

29
00:02:23,775 --> 00:02:26,030
В противном случае клиент не будет работать.

30
00:02:26,030 --> 00:02:30,650
Итак, теперь, когда вы установили свой клиент на вашем компьютере,

31
00:02:30,650 --> 00:02:33,200
добавьте запуск пряжи типа приглашения,

32
00:02:33,200 --> 00:02:38,610
и ваше приложение будет перекомпилироваться и обслуживаться в течение короткого времени.

33
00:02:38,610 --> 00:02:42,434
Как только ваше приложение будет успешно скомпилировано,

34
00:02:42,434 --> 00:02:45,650
зайдите в браузер, и вы увидите, что

35
00:02:45,650 --> 00:02:51,095
ваше приложение React запускается и отображается на экране здесь.

36
00:02:51,095 --> 00:02:54,290
Вы сразу заметите, что ваше приложение

37
00:02:54,290 --> 00:02:57,440
может извлекать данные с сервера, а затем отображать

38
00:02:57,440 --> 00:03:00,815
различные части вашего приложения так же, как и то, что вы

39
00:03:00,815 --> 00:03:06,070
сделали в конце вашего курса React.

40
00:03:06,100 --> 00:03:08,635
Когда вы перейдете в папку «О программе»,

41
00:03:08,635 --> 00:03:14,025
вы также увидите, что страница «О программе» также отображает информацию.

42
00:03:14,025 --> 00:03:16,880
Таким образом, ранее в меню,

43
00:03:16,880 --> 00:03:21,845
вы видите пункты в меню отображаются так же, как мы видели с приложением.

44
00:03:21,845 --> 00:03:23,950
Теперь, кроме того, я добавил

45
00:03:23,950 --> 00:03:28,475
еще одну страницу в одностраничное приложение под названием My Favorites, к

46
00:03:28,475 --> 00:03:31,150
которому вы не можете перейти,

47
00:03:31,150 --> 00:03:35,170
потому что ни один пользователь не вошел в их систему.

48
00:03:35,170 --> 00:03:38,330
Итак, вы видите, что у меня нет ни одного пользователя, который вошел в систему.

49
00:03:38,330 --> 00:03:42,160
Поэтому нет смысла указывать мои избранные, потому что вы не знаете,

50
00:03:42,160 --> 00:03:47,950
какой пользователь в качестве избранного должен отображаться здесь и контактную страницу, как обычно.

51
00:03:47,950 --> 00:03:49,710
Теперь, давайте войдем.

52
00:03:49,710 --> 00:03:51,555
Чтобы войти в наше приложение,

53
00:03:51,555 --> 00:03:58,020
мы нажмем на кнопку входа, а затем вы увидите, что появится диалоговое окно входа в систему.

54
00:03:58,020 --> 00:04:04,989
Затем позвольте мне войти в систему как один из зарегистрированных пользователей,

55
00:04:04,989 --> 00:04:09,650
которые мы зарегистрировали в рамках этого курса ранее.

56
00:04:09,650 --> 00:04:11,445
Таким образом, после входа в систему

57
00:04:11,445 --> 00:04:16,530
вы сразу заметите, что в правом углу

58
00:04:16,530 --> 00:04:19,760
вы увидите, что кнопка входа теперь превратилась в

59
00:04:19,760 --> 00:04:24,200
выход, и здесь указано имя пользователя.

60
00:04:24,200 --> 00:04:26,810
Итак, тот, кто вошел в систему, указан здесь.

61
00:04:26,810 --> 00:04:33,280
Вы также можете в принципе заменить это изображением пользователя.

62
00:04:33,280 --> 00:04:36,080
Теперь, для этого вам нужно сделать больше изменений

63
00:04:36,080 --> 00:04:40,290
как для клиента, так и для сервера, чтобы поддерживать отображение изображения здесь.

64
00:04:40,290 --> 00:04:42,160
Но на данный момент, я просто показываю вам,

65
00:04:42,160 --> 00:04:46,640
как мы можем легко отобразить здесь информацию о пользователе.

66
00:04:46,640 --> 00:04:50,405
Таким образом, это потребовало незначительных изменений в голове компонента,

67
00:04:50,405 --> 00:04:54,010
где я смогу получить имя пользователя.

68
00:04:54,010 --> 00:04:56,225
Таким образом, как только пользователь войдет в систему,

69
00:04:56,225 --> 00:04:59,060
то если вы теперь нажмете «Мои избранные», вы

70
00:04:59,060 --> 00:05:02,185
заметите, что в «Мои избранные» для пользователя нет ничего.

71
00:05:02,185 --> 00:05:07,635
Очевидно, что пользователь еще не выбрал ни одного избранного.

72
00:05:07,635 --> 00:05:09,880
Итак, давайте перейдем к меню.

73
00:05:09,880 --> 00:05:11,520
Затем, в меню,

74
00:05:11,520 --> 00:05:19,820
позвольте мне выбрать один пункт, а затем мы добавим это блюдо в избранное.

75
00:05:19,820 --> 00:05:22,065
Итак, спускаясь вниз,

76
00:05:22,065 --> 00:05:25,250
вы увидите символ сердца там,

77
00:05:25,250 --> 00:05:29,555
нажмите на него, и вы увидите, что это будет добавлено в избранное.

78
00:05:29,555 --> 00:05:32,000
О том, что это было добавлено в

79
00:05:32,000 --> 00:05:39,550
избранное, свидетельствует изменение иконки здесь от незаполненного сердца к наполненному сердцу.

80
00:05:39,550 --> 00:05:42,615
Теперь, если вы идете к любому другому блюду,

81
00:05:42,615 --> 00:05:46,005
вы заметите, что у этого есть незаполненное сердце, а

82
00:05:46,005 --> 00:05:49,685
это значит, что это еще не среди наших фаворитов.

83
00:05:49,685 --> 00:05:51,920
Итак, позвольте мне добавить еще один элемент в

84
00:05:51,920 --> 00:05:56,950
мои избранные, а затем давайте добавим третий элемент в мои избранные.

85
00:05:56,950 --> 00:06:04,265
Итак, теперь вы увидите, что если я теперь перейду к своим избранным,

86
00:06:04,265 --> 00:06:09,390
вы увидите набор «Мои избранные», который отображается здесь.

87
00:06:09,390 --> 00:06:12,470
Итак, вы видели, что я только что добавил эти три блюда в

88
00:06:12,470 --> 00:06:15,580
свои любимые, и поэтому они отображаются здесь.

89
00:06:15,580 --> 00:06:18,800
Таким образом, это отслеживается с помощью

90
00:06:18,800 --> 00:06:23,240
того, что избранное конечную точку

91
00:06:23,240 --> 00:06:26,670
на стороне сервера в зависимости от того, что реализовано как часть вашего последнего назначения.

92
00:06:26,670 --> 00:06:29,090
Итак, если вы сделали это назначение правильно,

93
00:06:29,090 --> 00:06:32,389
то эта часть должна работать так, как ожидалось.

94
00:06:32,389 --> 00:06:36,255
Теперь мы также можем изменить My Favorite.

95
00:06:36,255 --> 00:06:40,530
Итак, позвольте мне продолжить и удалить один из элементов из «Мои избранные».

96
00:06:40,530 --> 00:06:43,795
Таким образом, когда я нажимаю на эту кнопку, вы сразу заметите,

97
00:06:43,795 --> 00:06:48,935
что этот элемент удаляется из «Мои избранные» и немедленно исчезает, и

98
00:06:48,935 --> 00:06:54,120
мои избранные обновляются, и вы увидите, что результирующее значение отображается здесь.

99
00:06:54,120 --> 00:06:57,200
Таким образом, обратите внимание, что Мои избранные будут отображаться только

100
00:06:57,200 --> 00:07:01,785
для пользователей, которые вошли в систему.

101
00:07:01,785 --> 00:07:07,250
Таким образом, вы сразу заметили набор изменений, которые были

102
00:07:07,250 --> 00:07:09,635
сделаны для клиента, чтобы поддержать

103
00:07:09,635 --> 00:07:12,440
некоторые из этих дополнительных функций, которые вы видите здесь.

104
00:07:12,440 --> 00:07:16,690
Вы также видели, как здесь поддерживается функция входа и выхода из системы.

105
00:07:16,690 --> 00:07:18,530
Итак, когда я нажимаю кнопку выхода из системы,

106
00:07:18,530 --> 00:07:22,445
вы сразу замечаете, что пользователь выходит из системы, и

107
00:07:22,445 --> 00:07:25,520
имя пользователя исчезает оттуда, и

108
00:07:25,520 --> 00:07:29,375
поэтому кнопка также превращается в кнопку входа.

109
00:07:29,375 --> 00:07:34,880
Теперь, таким образом, вы заметили, как мой клиент был

110
00:07:34,880 --> 00:07:39,960
обновлен, чтобы использовать новый сервер REST API,

111
00:07:39,960 --> 00:07:44,180
чтобы поддерживать избранное, сохраняемое на стороне сервера, а

112
00:07:44,180 --> 00:07:50,140
затем автоматически отражающееся в приложении My Client, как показано здесь.

113
00:07:50,140 --> 00:07:55,190
Теперь, когда вы видели модифицированное приложение React в действии,

114
00:07:55,190 --> 00:07:58,250
пришло время посетить исходный код, чтобы узнать, как

115
00:07:58,250 --> 00:08:01,340
именно он реализован и какие изменения

116
00:08:01,340 --> 00:08:07,875
мы внесли в соответствии с приложением Redux в конце курса Redux.

117
00:08:07,875 --> 00:08:10,760
Теперь два основных изменения, которые вы заметите,

118
00:08:10,760 --> 00:08:16,070
это поддержка избранного, а также поддержка аутентификации,

119
00:08:16,070 --> 00:08:19,680
вход пользователя и выход из системы поддержки.

120
00:08:19,680 --> 00:08:21,770
Теперь, как они реализуются?

121
00:08:21,770 --> 00:08:27,720
Мы начнем наше путешествие в части Redux нашего приложения.

122
00:08:27,720 --> 00:08:29,580
Итак, перейдя в часть Redux,

123
00:08:29,580 --> 00:08:31,585
давайте посетим типы действий.

124
00:08:31,585 --> 00:08:35,255
В типах действий вы увидите теперь, что у нас есть

125
00:08:35,255 --> 00:08:40,210
три новых типа действий, связанных с их избранным.

126
00:08:40,210 --> 00:08:41,750
Таким образом, вы увидите загрузку

127
00:08:41,750 --> 00:08:43,500
Избранного, Избранное не удалось и добавить избранное,

128
00:08:43,500 --> 00:08:47,270
которое, как вы ожидали, будет там.

129
00:08:47,270 --> 00:08:57,355
Затем, также шесть различных типов действий, связанных с их логином и выходом из системы.

130
00:08:57,355 --> 00:09:00,320
Теперь, чтобы вы могли видеть запрос входа в систему, успех входа в систему

131
00:09:00,320 --> 00:09:02,210
, сбой входа, запрос выхода из

132
00:09:02,210 --> 00:09:03,810
системы, успех выхода и сбой.

133
00:09:03,810 --> 00:09:10,535
Итак, мы увидим, как эти типы действий фактически используются в нашем создании действий.

134
00:09:10,535 --> 00:09:12,620
Итак, зайдя в действие создателей,

135
00:09:12,620 --> 00:09:17,600
так вот где вы увидите поддержку фаворитов здесь.

136
00:09:17,600 --> 00:09:22,070
Итак, сначала мы рассмотрим поддержку избранного, а затем

137
00:09:22,070 --> 00:09:26,790
рассмотрим поддержку поддержки аутентификации.

138
00:09:26,790 --> 00:09:32,630
Итак, здесь вы увидите, что у нас есть новые методы ниже

139
00:09:32,630 --> 00:09:39,160
здесь называются FavoritesFailed, FavoritesFailed и addFavorites.

140
00:09:39,160 --> 00:09:41,550
Теперь, из ваших предыдущих впечатлений

141
00:09:41,550 --> 00:09:45,950
dishesLoading и dishesFailed и addDishiss и так далее.

142
00:09:45,950 --> 00:09:48,650
Итак, эти вещи вам очень знакомы,

143
00:09:48,650 --> 00:09:54,090
так что это точно такая же настройка для кода здесь.

144
00:09:54,090 --> 00:09:58,170
Кроме того, вы увидите другой метод здесь, называемый FetchFavorites,

145
00:09:58,170 --> 00:10:01,780
который снова, как я сказал, Redux tank

146
00:10:01,780 --> 00:10:03,630
, который реализован здесь,

147
00:10:03,630 --> 00:10:11,040
где мы будем использовать выборку для доступа к серверу, чтобы получить избранное.

148
00:10:11,040 --> 00:10:15,580
Таким образом, это методы, которые вы увидите здесь, а затем вы также увидите

149
00:10:15,580 --> 00:10:21,270
DeleteFavorite здесь, а также Redux танк для PostFavorite здесь.

150
00:10:21,270 --> 00:10:24,050
Итак, в PostFavorite, как

151
00:10:24,050 --> 00:10:28,130
вы ожидали, вы будете публиковать избранное на сервер здесь.

152
00:10:28,130 --> 00:10:35,730
Итак, здесь обратите внимание, как мы используем авторизацию.

153
00:10:35,730 --> 00:10:39,760
Будучи настроенным в нашем заголовке авторизации,

154
00:10:39,760 --> 00:10:43,710
это то, на что я хотел бы обратить ваше внимание в этот момент,

155
00:10:43,710 --> 00:10:50,940
мы вернемся к этому снова, когда мы посмотрим на аутентификацию пользователя и авторизацию.

156
00:10:50,940 --> 00:10:55,820
Итак, мы настраиваем заголовок авторизации следующим образом, используя fetch здесь.

157
00:10:55,820 --> 00:11:00,620
Итак, для извлечения, мы размещаем элемент в выборке

158
00:11:00,620 --> 00:11:06,845
здесь, а затем вы заметите, что структура того, как делается выборка, приведена здесь.

159
00:11:06,845 --> 00:11:13,735
Теперь всякий раз, когда вы размещаете избранное или удаляете избранное или извлекаете избранное,

160
00:11:13,735 --> 00:11:17,825
мы всегда будем иметь сервер возвращен вам,

161
00:11:17,825 --> 00:11:22,545
весь набор избранных, а затем мы просто добавим эти избранные

162
00:11:22,545 --> 00:11:29,185
в наш магазин редукции здесь, так что это то, что мы делаем здесь.

163
00:11:29,185 --> 00:11:33,585
Опять же, структура кода должна выглядеть очень знакома вам,

164
00:11:33,585 --> 00:11:37,070
если вы просто посмотрите, как

165
00:11:37,070 --> 00:11:41,600
реализованы фавориты поста, удалить фавориты и выборки избранного.

166
00:11:41,600 --> 00:11:45,665
Таким образом, все это будет обрабатывать вопрос избранного.

167
00:11:45,665 --> 00:11:49,520
Теперь, как именно реализованы сами фавориты?

168
00:11:49,520 --> 00:11:52,950
Таким образом, функция редуктора реализована в любимой структуре здесь.

169
00:11:52,950 --> 00:11:54,875
Итак, внутри этой уменьшенной функции,

170
00:11:54,875 --> 00:11:57,570
вы увидите, как мы обрабатываем добавление

171
00:11:57,570 --> 00:11:59,760
избранного, загрузку избранного, и избранное не удалось здесь.

172
00:11:59,760 --> 00:12:04,120
Опять же код должен выглядеть очень знакомым вам, основываясь на

173
00:12:04,120 --> 00:12:10,300
вашем опыте работы с функциями редуктора, которые вы видели для редукса раньше.

174
00:12:10,300 --> 00:12:18,850
Итак, снова обратите немного внимания на то, как реализован код.

175
00:12:18,850 --> 00:12:21,130
Это довольно просто, поэтому я не трачу

176
00:12:21,130 --> 00:12:24,610
слишком много времени на объяснение того, как эти вещи реализованы.

177
00:12:24,610 --> 00:12:27,720
Теперь, пользуясь этими преимуществами,

178
00:12:27,720 --> 00:12:30,895
у нас есть в компонентах, которые мы теперь имеем

179
00:12:30,895 --> 00:12:37,630
новый компонент избранного, чья работа заключается в том, чтобы отобразить весь список наших любимых.

180
00:12:37,630 --> 00:12:41,380
Итак, здесь вы видите, что сам компонент Избранное,

181
00:12:41,380 --> 00:12:44,790
структура компонента Избранное очень похожа на

182
00:12:44,790 --> 00:12:49,460
структуру компонента меню, поэтому здесь у нас есть

183
00:12:49,460 --> 00:12:56,900
компонент Избранное, который реализуется как функциональный компонент, и

184
00:12:56,900 --> 00:13:05,575
там мы рендеринга избранного в здесь, как вы видите в коде здесь.

185
00:13:05,575 --> 00:13:08,460
Опять же, очень просто, я думаю, вы должны быть в состоянии

186
00:13:08,460 --> 00:13:12,190
легко понять, как

187
00:13:12,190 --> 00:13:18,835
реализован компонент избранного, имея опыт работы с тем, как компонент меню реализован там.

188
00:13:18,835 --> 00:13:22,920
Итак, опять же, я не трачу слишком много времени на объяснение кода здесь.

189
00:13:22,920 --> 00:13:26,605
Теперь анализ кода также является

190
00:13:26,605 --> 00:13:32,280
хорошим опытом для вас, чтобы узнать, как реализован код, поэтому

191
00:13:32,280 --> 00:13:37,880
обработка этого кода в вашей голове поможет вам снова понять,

192
00:13:37,880 --> 00:13:43,790
чтобы консолидировать ваше понимание реакции более подробно.

193
00:13:43,790 --> 00:13:46,085
Итак, я оставлю это как упражнение для вас.

194
00:13:46,085 --> 00:13:49,150
Теперь я указываю, где были

195
00:13:49,150 --> 00:13:53,380
внесены изменения для реализации поддержки избранного.

196
00:13:53,380 --> 00:13:54,840
Теперь любимый термин,

197
00:13:54,840 --> 00:13:56,630
Избранное также рычаг в

198
00:13:56,630 --> 00:13:59,995
компонент детали блюда и внутри компонента детали блюда,

199
00:13:59,995 --> 00:14:08,830
вы увидите, что у нас есть дополнительной- Здесь,

200
00:14:08,830 --> 00:14:14,799
в рендере блюдо функционального компонента,

201
00:14:14,799 --> 00:14:19,360
мы будем оказывать кнопку, которая поддерживает

202
00:14:19,360 --> 00:14:27,595
выбор или когда вы нажимаете на контур сердца,

203
00:14:27,595 --> 00:14:33,440
он добавит этот конкретный пункт в ваш список любимых.

204
00:14:33,440 --> 00:14:37,815
Итак, все это поддерживается здесь, используя эту кнопку здесь, которая

205
00:14:37,815 --> 00:14:44,200
вызывает, как вы видите эту функцию, называемую post favorite, которая является redux.

206
00:14:44,200 --> 00:14:47,900
Спасибо, что мы реализовали там и эта поддержка для этого

207
00:14:47,900 --> 00:14:51,925
реализована в основных компонентах, поэтому, когда вы заходите в основной компонент,

208
00:14:51,925 --> 00:14:56,720
вы увидите, как здесь реализован пост фаворита,

209
00:14:56,720 --> 00:15:00,230
и вы также увидите, что это

210
00:15:00,230 --> 00:15:04,540
включено в карту, отправленную на реквизит, и поэтому пост избранное реализовано.

211
00:15:04,540 --> 00:15:07,580
Итак, вы видите, что структурирование очень похоже на

212
00:15:07,580 --> 00:15:11,910
то, что вы видели для другого кода там.

213
00:15:11,910 --> 00:15:18,295
Таким образом, я не собираюсь тратить слишком много времени на то, как реализована поддержка избранного,

214
00:15:18,295 --> 00:15:21,400
вместо этого позвольте мне потратить немного больше времени на то, как

215
00:15:21,400 --> 00:15:27,705
авторизация пользователя и аутентификация поддерживаются в коде здесь.

216
00:15:27,705 --> 00:15:29,765
Теперь для аутентификации пользователя,

217
00:15:29,765 --> 00:15:35,810
то, что мы делаем здесь, заключается в том, что когда вы идете в хранилище конфигурации здесь,

218
00:15:35,810 --> 00:15:42,530
вы увидите, что у меня есть еще одна функция редуктора под названием Auth, которая реализована здесь.

219
00:15:42,530 --> 00:15:49,670
Таким образом, это будет отслеживать часть авторизации.

220
00:15:49,670 --> 00:15:51,380
Теперь как это реализовано?

221
00:15:51,380 --> 00:15:53,910
Опять же, входя в действия создателей,

222
00:15:53,910 --> 00:16:01,070
типов бездействия мы уже видели набор действий, связанных с логином и выходом из системы.

223
00:16:01,070 --> 00:16:02,985
Итак, входя в действие создателей,

224
00:16:02,985 --> 00:16:05,980
вы увидите, что здесь у нас есть

225
00:16:05,980 --> 00:16:10,620
все функции, которые реализованы для входа в систему и выхода из системы.

226
00:16:10,620 --> 00:16:18,405
Таким образом, вы увидите новую функцию под названием request login, получение регистрации,

227
00:16:18,405 --> 00:16:25,765
и поэтому это когда логин успешно и так далее, но, в частности,

228
00:16:25,765 --> 00:16:35,930
этот конкретный функт здесь пользователя входа в систему, где мы начинаем с процесса входа.

229
00:16:35,930 --> 00:16:40,955
Таким образом, мы отправим логин запроса в точке, когда пользователь пытается войти,

230
00:16:40,955 --> 00:16:46,010
после этого мы сделаем выборку в конечную точку входа пользователей с

231
00:16:46,010 --> 00:16:52,455
сообщением, и это содержит в теле сообщения учетные данные для пользователя здесь.

232
00:16:52,455 --> 00:16:54,445
Итак, как только мы сделаем выборку,

233
00:16:54,445 --> 00:16:58,570
если ответ правильно возвращен,

234
00:16:58,570 --> 00:17:02,330
тогда ответ должен содержать токен там.

235
00:17:02,330 --> 00:17:08,545
Итак, мы будем обрабатывать этот ответ здесь, а затем, если логин был успешным,

236
00:17:08,545 --> 00:17:15,790
тогда мы сохраним токен в локальном хранилище здесь.

237
00:17:15,790 --> 00:17:18,210
Таким образом, вы можете видеть, что мы говорим, что

238
00:17:18,210 --> 00:17:21,600
localStorage set маркер ответа маркера, а затем мы

239
00:17:21,600 --> 00:17:27,830
также сохраним учетные данные пользователя в локальном хранилище здесь.

240
00:17:27,830 --> 00:17:34,045
Таким образом, эти два помогут мне отслеживать процесс входа пользователя.

241
00:17:34,045 --> 00:17:39,600
После этого мы отправим логин получения.

242
00:17:39,600 --> 00:17:44,150
Теперь в этот момент, когда пользователь успешно вошел в систему,

243
00:17:44,150 --> 00:17:46,645
мы также будем получать избранное для пользователя.

244
00:17:46,645 --> 00:17:51,975
Теперь помните, что вы можете получить только избранное для пользователя, который вошел в систему.

245
00:17:51,975 --> 00:17:55,110
Когда ни один пользователь не вошел в систему, нет избранного для извлечения,

246
00:17:55,110 --> 00:17:58,110
но когда пользователь успешно входит в систему, вы хотите получить

247
00:17:58,110 --> 00:18:02,250
избранное пользователя, чтобы он мог отобразить это в вашем приложении реагирования.

248
00:18:02,250 --> 00:18:04,520
Поэтому я также делаю выборку избранного

249
00:18:04,520 --> 00:18:07,505
здесь, а затем мы получим логин здесь.

250
00:18:07,505 --> 00:18:12,050
Затем, если есть ошибка, мы отправим ошибку входа здесь.

251
00:18:12,050 --> 00:18:18,080
Таким образом, все эти функции, ошибка входа в систему и входа в систему,

252
00:18:18,080 --> 00:18:25,020
затем вызовет соответствующие функции Reducer, которые реализованы в файле Auth.Js.

253
00:18:25,020 --> 00:18:27,260
Таким образом, перейдя в файл Auth.Js,

254
00:18:27,260 --> 00:18:33,660
состояние здесь отслеживает статус входа пользователя здесь.

255
00:18:33,660 --> 00:18:36,930
Таким образом, здесь мы также будем хранить в государстве,

256
00:18:36,930 --> 00:18:40,740
государство включает в себя восточную загрузку Boolean, который

257
00:18:40,740 --> 00:18:46,160
отслеживает, находитесь ли вы в процессе входа в систему. Простота authenticate-

258
00:18:46,160 --> 00:18:53,850
будет указывать, является ли пользователь аутентифицирован и

259
00:18:53,850 --> 00:18:57,200
поэтому пользователь вошел в систему, так что вы сможете разрешить пользователю.

260
00:18:57,200 --> 00:19:00,060
Таким образом, этот флаг используется во многих случаях

261
00:19:00,060 --> 00:19:03,970
для отображения статуса входа пользователя, а затем

262
00:19:03,970 --> 00:19:11,340
свойство пользователя для состояния отслеживает учетные данные пользователя.

263
00:19:11,340 --> 00:19:16,135
Таким образом, именно там мы получим имя пользователя для отображения в нашем компоненте заголовка.

264
00:19:16,135 --> 00:19:25,310
Теперь, здесь вы увидите запрос на вход, и когда срабатывает успех входа,

265
00:19:25,310 --> 00:19:31,695
вы сохраните значение токена здесь, а затем сбой входа.

266
00:19:31,695 --> 00:19:35,235
Запрос выхода из системы, успешно выходящий из системы,

267
00:19:35,235 --> 00:19:45,140
все это обрабатывается этими различными частями внутри этого редуктора auth.js редуктора здесь.

268
00:19:45,140 --> 00:19:51,705
Итак, вот как здесь обрабатывается аутентификация пользователя.

269
00:19:51,705 --> 00:19:54,055
Теперь, в компоненте заголовка,

270
00:19:54,055 --> 00:19:55,770
идя в компонент заголовка,

271
00:19:55,770 --> 00:20:00,040
так что здесь у нас есть функция входа в систему.

272
00:20:00,040 --> 00:20:02,460
Итак, HandleLogin, вы помните, что мы

273
00:20:02,460 --> 00:20:05,545
уже реализовали это в курсе реакции.

274
00:20:05,545 --> 00:20:09,330
В HandleLogin они будут переключать модальный.

275
00:20:09,330 --> 00:20:14,340
Итак, мы закроем модальный, а затем войдем в систему пользователя в этот момент.

276
00:20:14,340 --> 00:20:18,810
Итак, мы скажем this.props LoginUser, а затем вы увидите, что учетные данные,

277
00:20:18,810 --> 00:20:22,710
имя пользователя и пароль передаются в качестве параметров

278
00:20:22,710 --> 00:20:27,115
LoginUser и так, что попадает в LoginUser func,

279
00:20:27,115 --> 00:20:30,400
который затем заботится о регистрации в пользователе.

280
00:20:30,400 --> 00:20:34,930
Теперь, как вы отображаете состояние входа пользователя.

281
00:20:34,930 --> 00:20:36,785
Итак, это снова очень просто.

282
00:20:36,785 --> 00:20:38,870
В навигационной панели здесь

283
00:20:38,870 --> 00:20:42,900
вы увидите, что я добавил новый элемент здесь.

284
00:20:42,900 --> 00:20:47,900
Итак, вот где мы скажем это.Props.auth.IsAuthenticated.

285
00:20:47,900 --> 00:20:54,280
Итак, флаг IsAuthenticated используется здесь мной, и поэтому, если это установлено в true,

286
00:20:54,280 --> 00:20:55,845
тогда я покажу

287
00:20:55,845 --> 00:21:04,910
кнопку Logout здесь, и это то, что я покажу здесь.

288
00:21:04,910 --> 00:21:07,110
В противном случае я покажу кнопку входа.

289
00:21:07,110 --> 00:21:09,890
Таким образом, используя этот флаг IsAuthenticated,

290
00:21:09,890 --> 00:21:14,435
я переворачиваю, какая конкретная кнопка будет отображаться в

291
00:21:14,435 --> 00:21:20,520
заголовке, независимо от того, отображается ли вы кнопка выхода из системы или кнопка входа.

292
00:21:20,520 --> 00:21:24,290
Вот тот момент, который мы показываем здесь.

293
00:21:24,290 --> 00:21:29,240
Итак, логин или выход здесь.

294
00:21:29,240 --> 00:21:34,690
Итак, вот как мы обрабатываем процесс входа и выхода из системы

295
00:21:34,690 --> 00:21:40,935
здесь, а также мы будем отображать имя пользователя прямо там.

296
00:21:40,935 --> 00:21:43,245
Таким образом, когда вы показываете кнопку выхода из системы,

297
00:21:43,245 --> 00:21:48,585
вы также увидите, что мы показываем имя пользователя там.

298
00:21:48,585 --> 00:21:54,290
Таким образом, ниже здесь,

299
00:21:54,290 --> 00:21:59,720
мы также будем отображать кнопку HandleLogout, а

300
00:21:59,720 --> 00:22:06,490
затем у нас есть кнопка выхода отображается здесь.

301
00:22:06,490 --> 00:22:09,650
Кроме того, это конкретное заявление здесь,

302
00:22:09,650 --> 00:22:13,280
вот как мы показываем имя пользователя здесь.

303
00:22:13,280 --> 00:22:17,760
Таким образом, это использует это.props.auth.user.user.username.

304
00:22:17,760 --> 00:22:24,110
Итак, свойство пользователя в состоянии auth содержит

305
00:22:24,110 --> 00:22:27,290
учетные данные пользователя, и оттуда я извлек имя пользователя

306
00:22:27,290 --> 00:22:30,980
, а затем использую его для отображения в строке заголовка.

307
00:22:30,980 --> 00:22:34,190
Таким образом, компонент заголовка

308
00:22:34,190 --> 00:22:38,170
обновляется для обработки процесса входа и выхода из системы.

309
00:22:38,170 --> 00:22:41,610
Опять же, довольно простые способы реализации,

310
00:22:41,610 --> 00:22:44,490
это довольно простой способ, который я реализовал здесь.

311
00:22:44,490 --> 00:22:49,765
Теперь, очевидно, если вам нужен более сложный способ обработки процесса входа и выхода из системы,

312
00:22:49,765 --> 00:22:54,120
вы, конечно, можете перейти к полноценному способу делать вещи,

313
00:22:54,120 --> 00:22:58,160
но этого достаточно, чтобы удовлетворить требования для моего приложения.

314
00:22:58,160 --> 00:23:01,650
Итак, я реализовал процесс входа и выхода из системы

315
00:23:01,650 --> 00:23:06,970
очень простым способом здесь, используя помощь магазина Redux.

316
00:23:06,970 --> 00:23:09,440
Таким образом, магазин Redux сам отслеживает

317
00:23:09,440 --> 00:23:15,455
мой статус входа в систему, независимо от того, вошел ли я в систему и я аутентифицирован и вышел ли я из системы.

318
00:23:15,455 --> 00:23:17,020
Таким образом, если пользователь вышел из системы,

319
00:23:17,020 --> 00:23:19,325
то My Favorites здесь не отображается.

320
00:23:19,325 --> 00:23:24,090
Итак, один важный момент, который вы спросите, -

321
00:23:24,090 --> 00:23:31,990
как мы можем гарантировать, что мы не войдем в избранное здесь государство?

322
00:23:31,990 --> 00:23:39,530
Итак, это происходит в том месте, где мы обрабатываем маршруты здесь.

323
00:23:39,530 --> 00:23:42,640
Итак, вы заметите, что для избранного здесь

324
00:23:42,640 --> 00:23:46,880
мы объявляем для избранного конечную точку вместо того, чтобы

325
00:23:46,880 --> 00:23:51,080
называть это как маршрут, который мы называем его частным маршрутом.

326
00:23:51,080 --> 00:23:55,590
Таким образом, частный маршрут позволяет вам убедиться, что вам будет

327
00:23:55,590 --> 00:24:00,500
разрешено входить в эту часть только при обстоятельствах,

328
00:24:00,500 --> 00:24:02,870
когда пользователь вошел в систему.

329
00:24:02,870 --> 00:24:09,600
Таким образом, это предотвратит переход к конечной точке /избранного, если ни один пользователь не вошел в систему.

330
00:24:09,600 --> 00:24:12,055
Итак, как реализуется этот частный маршрут?

331
00:24:12,055 --> 00:24:16,020
Этот частный маршрут реализован прямо здесь.

332
00:24:16,020 --> 00:24:19,635
Таким образом, вы можете видеть, что этот частный маршрут реализован, как показано здесь.

333
00:24:19,635 --> 00:24:24,070
Таким образом, это не что иное, как маршрут здесь, а затем здесь,

334
00:24:24,070 --> 00:24:28,670
мы будем реализовывать this.props.auth.isAuthenticated.

335
00:24:28,670 --> 00:24:30,620
Итак, если пользователь аутентифицирован,

336
00:24:30,620 --> 00:24:35,100
то я позволю перейти к

337
00:24:35,100 --> 00:24:40,890
компоненту, который является компонентом избранного.

338
00:24:40,890 --> 00:24:45,130
В противном случае я просто перенаправлю на домашний компонент.

339
00:24:45,130 --> 00:24:46,790
Итак, если ни один пользователь не вошел в систему,

340
00:24:46,790 --> 00:24:49,900
я просто перенаправлю на домашний компонент, и поэтому это

341
00:24:49,900 --> 00:24:54,230
реализовано с использованием этого частного маршрута, который я разработал здесь.

342
00:24:54,230 --> 00:25:00,270
Таким образом, частный маршрут - это то, что поддерживается маршрутизатором,

343
00:25:00,270 --> 00:25:06,750
который мы используем React маршрутизатор Dom, который мы использовали в нашем приложении React.

344
00:25:06,750 --> 00:25:10,300
Таким образом, очень простой способ обработки ситуаций,

345
00:25:10,300 --> 00:25:16,425
когда вы не хотите, чтобы определенные маршруты перемещались, когда пользователь не вошел в систему.

346
00:25:16,425 --> 00:25:21,610
Итак, еще раз несколько простых изменений, которые я сделал в

347
00:25:21,610 --> 00:25:23,080
приложении, чтобы облегчить

348
00:25:23,080 --> 00:25:27,360
все различные функции, которые вы видите в вашем приложении React.

349
00:25:27,360 --> 00:25:29,270
Теперь, как вы и ожидали,

350
00:25:29,270 --> 00:25:31,115
вы можете быть недооценены в этот момент

351
00:25:31,115 --> 00:25:34,630
: «Это так просто реализовать», и действительно это

352
00:25:34,630 --> 00:25:39,005
именно то, что было сделано для поддержки всех новых функций.

353
00:25:39,005 --> 00:25:42,700
Как вы видите,

354
00:25:42,700 --> 00:25:47,470
процесс аутентификации пользователя и входа в систему и выхода из системы, так как наш сервер имеет полную поддержку всего,

355
00:25:47,470 --> 00:25:51,800
реализуя отслеживание на стороне клиента

356
00:25:51,800 --> 00:25:57,290
процесса входа и выхода пользователя и все, что становится довольно простым, просто

357
00:25:57,290 --> 00:25:59,980
изменив некоторые компоненты и добавление

358
00:25:59,980 --> 00:26:09,015
в функцию редуктора auth и добавление в состояние auth в наш магазин Redux.

359
00:26:09,015 --> 00:26:13,010
Весь процесс обработки аутентификации пользователя,

360
00:26:13,010 --> 00:26:17,885
входа в систему и выхода из системы становится довольно простым в этом случае.

361
00:26:17,885 --> 00:26:23,055
Итак, с этим быстрым обзором обновленного кода React,

362
00:26:23,055 --> 00:26:25,820
давайте продолжим изучать

363
00:26:25,820 --> 00:26:30,415
наше приложение React еще несколько функций нашего приложения React.

364
00:26:30,415 --> 00:26:33,650
Так что снова, возвращаясь к нашему приложению,

365
00:26:33,650 --> 00:26:36,580
мы можем теперь перейти в меню, а затем вытащить

366
00:26:36,580 --> 00:26:41,080
любое блюдо здесь, и я могу опубликовать комментарии к блюду здесь,

367
00:26:41,080 --> 00:26:49,020
так что я бы сразу установил рейтинг здесь и мой комментарий значение здесь.

368
00:26:50,020 --> 00:26:59,950
Обратите внимание, что я не вводим свое имя пользователя или имя автора здесь, в форме здесь.

369
00:26:59,950 --> 00:27:03,820
Теперь, конечно, для того, чтобы отправить комментарий, вам нужно войти в систему.

370
00:27:03,820 --> 00:27:08,765
Итак, если вы не вошли в систему, этот комментарий не будет принят моим сервером.

371
00:27:08,765 --> 00:27:11,165
Итак, позвольте мне сначала войти в систему.

372
00:27:11,165 --> 00:27:17,140
Таким образом, я могу войти здесь,

373
00:27:17,140 --> 00:27:19,965
и в тот момент, когда я войду в систему, вы сразу заметите, что

374
00:27:19,965 --> 00:27:23,485
панель инструментов заголовка обновляется, чтобы указать мой статус.

375
00:27:23,485 --> 00:27:28,255
Теперь я могу опубликовать этот комментарий, и вы заметите, что когда я отправлю комментарий,

376
00:27:28,255 --> 00:27:30,670
комментарий добавляется в список комментариев,

377
00:27:30,670 --> 00:27:33,120
а также обратите внимание, что поле автора

378
00:27:33,120 --> 00:27:38,285
автоматически заполняется здесь, потому что именно так мы настраиваем нашу сторону сервера.

379
00:27:38,285 --> 00:27:39,810
В поле комментариев

380
00:27:39,810 --> 00:27:44,680
мы установили нашего пользователя как ссылку на пользовательскую

381
00:27:44,680 --> 00:27:48,580
информацию, которую мы храним на

382
00:27:48,580 --> 00:27:53,060
нашей стороне сервера, и так как мы используем заполнение Mongoose Populate на стороне сервера,

383
00:27:53,060 --> 00:27:55,555
информация о пользователе автоматически заполняется

384
00:27:55,555 --> 00:27:58,230
в входящие комментарии со стороны сервера.

385
00:27:58,230 --> 00:28:02,350
Таким образом, вы замечаете, как я использую

386
00:28:02,350 --> 00:28:07,560
то, что сервер уже предоставляет для меня, чтобы автоматически заполнять детали.

387
00:28:08,290 --> 00:28:12,665
Таким образом, незначительные изменения снова даже

388
00:28:12,665 --> 00:28:20,420
на странице детали блюда, чтобы отразить использование комментариев поддержки на сайте сервера.

389
00:28:20,420 --> 00:28:22,370
С этим я завершу

390
00:28:22,370 --> 00:28:29,415
быструю иллюстрацию клиента React, который мы реализовали в рамках

391
00:28:29,415 --> 00:28:33,445
этого упражнения, и я надеюсь, что вы

392
00:28:33,445 --> 00:28:37,690
также изучите детали кода в клиенте, а затем

393
00:28:37,690 --> 00:28:41,560
вспомните, что вы узнали в курсе React и посмотрите, как

394
00:28:41,560 --> 00:28:46,230
изменения позволяют нам реализовать в модифицированном,

395
00:28:46,230 --> 00:28:51,390
[неразборчивом], который теперь может общаться с сервером, а затем поддерживать все функции, которые

396
00:28:51,390 --> 00:28:58,770
мы изначально планировали реализовать как часть нашего клиента, так и сервера.