1
00:00:00,000 --> 00:00:08,095
Bây giờ chúng tôi đã hoàn tất cập nhật phía máy chủ,

2
00:00:08,095 --> 00:00:10,770
đó là thời gian để chuyển sang Angular Client.

3
00:00:10,770 --> 00:00:13,830
Để thuận tiện cho bạn, tôi đã cung cấp cho bạn

4
00:00:13,830 --> 00:00:17,700
kho lưu trữ GitHub có chứa phiên bản cuối cùng của

5
00:00:17,700 --> 00:00:20,840
Angular Client có thể giao tiếp với

6
00:00:20,840 --> 00:00:26,805
REST API Server của chúng tôi và sau đó hiển thị các chế độ xem khác nhau cho khách hàng của chúng tôi.

7
00:00:26,805 --> 00:00:29,690
Vì vậy, tôi đã thực hiện các ứng dụng Angular mà chúng tôi

8
00:00:29,690 --> 00:00:32,895
phát triển trong khóa học thứ hai của chuyên môn này,

9
00:00:32,895 --> 00:00:34,380
và sau đó sửa đổi nó.

10
00:00:34,380 --> 00:00:39,680
Chúng tôi sẽ có một tour du lịch ngắn gọn thông qua mã trong một chút sau đó.

11
00:00:39,680 --> 00:00:44,005
Bây giờ, bạn sẽ sao chép kho lưu trữ Git vào máy tính của bạn,

12
00:00:44,005 --> 00:00:47,525
và sau đó khởi động máy khách Angular của bạn,

13
00:00:47,525 --> 00:00:50,820
và sau đó nhìn thấy nó giao tiếp với phía máy chủ của chúng tôi.

14
00:00:50,820 --> 00:00:54,555
Hãy xem chi tiết tiếp theo.

15
00:00:54,555 --> 00:00:57,885
Để bắt đầu với bài tập này,

16
00:00:57,885 --> 00:01:01,345
tại cửa sổ thiết bị đầu cuối hoặc lệnh

17
00:01:01,345 --> 00:01:04,070
của bạn, hãy đi đến vị trí thuận tiện của bạn và sau đó tại

18
00:01:04,070 --> 00:01:06,685
dấu nhắc gõ git clone

19
00:01:06,685 --> 00:01:21,615
https://github.com/jmuppala/conFusion-Angular6.git.

20
00:01:21,615 --> 00:01:28,705
Sau đó, để cho ứng dụng Angular được nhân bản vào máy tính của bạn.

21
00:01:28,705 --> 00:01:30,495
Sau khi nhân bản hoàn tất,

22
00:01:30,495 --> 00:01:39,340
di chuyển đến thư mục Confusion-angular6

23
00:01:39,340 --> 00:01:43,620
vừa được tạo ra khi bạn sao chép kho git này.

24
00:01:43,620 --> 00:01:48,845
Sau đó, bạn sẽ ngay lập tức nhận thấy rằng có một loạt các tập tin đã có.

25
00:01:48,845 --> 00:01:56,700
Bây giờ, tại dấu nhắc, gõ npm cài đặt,

26
00:01:56,700 --> 00:02:00,500
để cài đặt tất cả các mô-đun nút

27
00:02:00,500 --> 00:02:04,460
mà ứng dụng Angular này phụ thuộc vào.

28
00:02:04,460 --> 00:02:09,415
Vì vậy, một khi các mô-đun nút hoặc tất cả cài đặt,

29
00:02:09,415 --> 00:02:18,095
sau đó chúng tôi có thể khởi động NG của chúng tôi phục vụ để biên dịch và phục vụ lên ứng dụng Angular của chúng tôi.

30
00:02:18,095 --> 00:02:21,765
Một khi tất cả mọi thứ được cài đặt bởi npm install,

31
00:02:21,765 --> 00:02:27,080
sau đó đảm bảo rằng MongoDB Server của bạn

32
00:02:27,080 --> 00:02:32,365
đang hoạt động và cũng là REST API Server của bạn cũng đang hoạt động và chạy.

33
00:02:32,365 --> 00:02:35,165
Nếu không, Angular Client của bạn sẽ không hoạt động.

34
00:02:35,165 --> 00:02:39,720
Vì vậy, bây giờ mà bạn đã cài đặt Angular Client của bạn trên máy tính của bạn,

35
00:02:39,720 --> 00:02:43,815
tại các loại nhắc ng phục vụ và

36
00:02:43,815 --> 00:02:50,755
ứng dụng Angular của bạn sẽ được biên dịch và phục vụ bởi ng phục vụ trong một thời gian ngắn.

37
00:02:50,755 --> 00:02:54,725
Một khi ứng dụng Angular của bạn được biên dịch thành công,

38
00:02:54,725 --> 00:02:59,345
sau đó đi đến một trình duyệt và mở ứng dụng Angular của bạn trong trình duyệt.

39
00:02:59,345 --> 00:03:01,025
Đi đến trình duyệt,

40
00:03:01,025 --> 00:03:06,665
tại thanh địa chỉ,

41
00:03:06,665 --> 00:03:12,050
hãy để tôi gõ vào localhost:4200 và

42
00:03:12,050 --> 00:03:14,345
bạn sẽ thấy rằng ứng dụng Angular của bạn được

43
00:03:14,345 --> 00:03:17,930
khởi động và có thể nhìn thấy trên màn hình ở đây.

44
00:03:17,930 --> 00:03:21,170
Bạn sẽ nhận thấy ngay lập tức rằng ứng dụng Angular của bạn

45
00:03:21,170 --> 00:03:24,500
có thể lấy dữ liệu từ máy chủ và sau đó hiển thị

46
00:03:24,500 --> 00:03:28,115
các phần khác nhau của ứng dụng Angular của bạn giống như những gì bạn

47
00:03:28,115 --> 00:03:33,040
đã làm ở phần cuối của khóa học Angular của bạn.

48
00:03:33,080 --> 00:03:35,605
Khi bạn đi để nói về thư mục,

49
00:03:35,605 --> 00:03:42,730
bạn cũng sẽ thấy rằng trang Giới thiệu cũng hiển thị thông tin như vậy.

50
00:03:42,730 --> 00:03:45,970
Trong menu, bạn thấy các mục trong menu được

51
00:03:45,970 --> 00:03:49,475
hiển thị giống như chúng ta đã thấy với ứng dụng Angular.

52
00:03:49,475 --> 00:03:51,595
Bây giờ, ngoài ra, tôi đã thêm vào

53
00:03:51,595 --> 00:03:56,320
một trang nữa vào ứng dụng trang đơn gọi là My Favorites,

54
00:03:56,320 --> 00:04:02,590
mà bạn không thể điều hướng đến bởi vì không có người dùng nào được đăng nhập vào hệ thống.

55
00:04:02,590 --> 00:04:05,960
Vì vậy, bạn thấy rằng tôi không có bất kỳ người dùng đăng nhập vào hệ thống.

56
00:04:05,960 --> 00:04:09,120
Vì vậy, đó là lý do tại sao không có điểm trong việc chỉ ra mục yêu thích của tôi,

57
00:04:09,120 --> 00:04:10,845
bởi vì bạn không biết người dùng nào,

58
00:04:10,845 --> 00:04:12,990
như mục yêu thích, nên được hiển thị ở đây.

59
00:04:12,990 --> 00:04:15,580
Trang liên hệ như thường lệ.

60
00:04:15,580 --> 00:04:17,345
Bây giờ, hãy đăng nhập.

61
00:04:17,345 --> 00:04:19,235
Để đăng nhập vào ứng dụng của

62
00:04:19,235 --> 00:04:25,665
chúng tôi, chúng tôi sẽ nhấp vào nút Đăng nhập và sau đó bạn sẽ thấy rằng hộp thoại Đăng nhập bật lên.

63
00:04:25,665 --> 00:04:32,620
Sau đó, hãy để tôi đăng nhập như là một trong những người dùng đã đăng ký,

64
00:04:32,620 --> 00:04:37,295
mà chúng tôi đã đăng ký như là một phần của khóa học này trước đó.

65
00:04:37,295 --> 00:04:39,100
Vì vậy, một khi bạn đăng nhập,

66
00:04:39,100 --> 00:04:41,840
bạn sẽ ngay lập tức nhận thấy rằng

67
00:04:41,840 --> 00:04:44,150
, ở góc phải,

68
00:04:44,150 --> 00:04:47,410
bạn thấy nút Đăng nhập đã biến thành

69
00:04:47,410 --> 00:04:51,730
Đăng xuất và tên của Người dùng được chỉ định ở đây.

70
00:04:51,730 --> 00:04:54,500
Vì vậy, bất cứ ai đăng nhập được chỉ ra ở đây.

71
00:04:54,500 --> 00:04:56,110
Bạn cũng có thể, về nguyên tắc,

72
00:04:56,110 --> 00:05:00,925
thay thế điều này bằng hình ảnh của người dùng.

73
00:05:00,925 --> 00:05:03,715
Bây giờ, cho rằng bạn cần phải làm nhiều sửa đổi hơn cho

74
00:05:03,715 --> 00:05:07,790
cả máy khách và máy chủ để hỗ trợ hiển thị hình ảnh ở đây.

75
00:05:07,790 --> 00:05:10,570
Nhưng, tại thời điểm này, tôi chỉ cho bạn thấy làm thế nào chúng tôi

76
00:05:10,570 --> 00:05:14,260
có thể dễ dàng hiển thị thông tin người dùng ở đây.

77
00:05:14,260 --> 00:05:17,200
Vì vậy, điều này đòi hỏi phải sửa đổi nhỏ cho người đứng đầu của

78
00:05:17,200 --> 00:05:20,335
thành phần nơi tôi sẽ có thể truy xuất

79
00:05:20,335 --> 00:05:23,410
tên người dùng từ một dịch vụ

80
00:05:23,410 --> 00:05:27,060
được gọi là dịch vụ OAuth mà chúng ta sẽ nói về trong một thời gian ngắn.

81
00:05:27,060 --> 00:05:29,420
Vì vậy, một khi người dùng đăng nhập,

82
00:05:29,420 --> 00:05:31,955
sau đó nếu bạn bấm vào Mục yêu thích của tôi,

83
00:05:31,955 --> 00:05:35,360
bạn sẽ nhận thấy rằng không có gì trong mục yêu thích của tôi cho người dùng.

84
00:05:35,360 --> 00:05:40,815
Rõ ràng, bởi vì người dùng chưa chọn bất kỳ mục yêu thích nào.

85
00:05:40,815 --> 00:05:44,675
Vì vậy, bây giờ chúng ta hãy vào Menu và sau đó trong Menu,

86
00:05:44,675 --> 00:05:52,980
hãy để tôi chọn một mục và sau đó họ sẽ thêm món ăn này vào mục yêu thích của chúng tôi.

87
00:05:52,980 --> 00:05:55,230
Vì vậy, đi xuống dưới đây,

88
00:05:55,230 --> 00:05:58,415
bạn thấy biểu tượng trái tim ở đó,

89
00:05:58,415 --> 00:06:02,655
nhấp vào đó và bạn sẽ thấy rằng điều này sẽ được thêm vào The Favorites.

90
00:06:02,655 --> 00:06:06,620
Thực tế là điều này đã được thêm vào The Favorites được chỉ ra bởi

91
00:06:06,620 --> 00:06:12,790
sự thay đổi trong biểu tượng ở đây từ một trái tim không đầy đến một trái tim đầy.

92
00:06:12,790 --> 00:06:15,790
Bây giờ, nếu bạn đi đến bất kỳ món ăn nào khác,

93
00:06:15,790 --> 00:06:19,080
bạn sẽ nhận thấy rằng điều này có một trái tim không đầy, có

94
00:06:19,080 --> 00:06:22,795
nghĩa là điều này chưa được ưa thích của chúng tôi.

95
00:06:22,795 --> 00:06:25,070
Vì vậy, hãy để tôi thêm vào một mục nữa vào mục

96
00:06:25,070 --> 00:06:29,990
yêu thích của tôi và sau đó chúng ta hãy thêm một mục thứ ba vào mục yêu thích của tôi cũng.

97
00:06:29,990 --> 00:06:37,455
Vì vậy, bây giờ, bạn sẽ thấy rằng nếu bây giờ tôi đi đến My Favorites,

98
00:06:37,455 --> 00:06:42,560
bạn sẽ thấy một tập hợp các My Favorites được hiển thị ở đây.

99
00:06:42,560 --> 00:06:46,610
Vì vậy, bạn thấy rằng tôi chỉ cần thêm ba món ăn vào My Favorites.

100
00:06:46,610 --> 00:06:48,820
Vì vậy, chúng đang được hiển thị ở đây.

101
00:06:48,820 --> 00:06:57,100
Vì vậy, điều này được theo dõi bằng cách sử dụng điểm cuối yêu thích ở phía máy chủ,

102
00:06:57,100 --> 00:06:59,870
mà tôi đã thực hiện như là một phần của nhiệm vụ cuối cùng của bạn.

103
00:06:59,870 --> 00:07:05,554
Vì vậy, nếu bạn đã thực hiện nhiệm vụ đó một cách chính xác thì phần này sẽ hoạt động như mong đợi.

104
00:07:05,554 --> 00:07:09,310
Bây giờ, chúng ta cũng có thể sửa đổi yêu thích của tôi.

105
00:07:09,310 --> 00:07:11,320
Vì vậy, ví dụ, ở góc phải ở đây,

106
00:07:11,320 --> 00:07:14,165
bạn thấy nút chuyển đổi Xóa này ở đây.

107
00:07:14,165 --> 00:07:16,320
Vì vậy, để tôi bật nó lên.

108
00:07:16,320 --> 00:07:17,730
Vì vậy, khi bạn bật tính năng này,

109
00:07:17,730 --> 00:07:22,025
bạn ngay lập tức thấy ba chữ thập màu đỏ

110
00:07:22,025 --> 00:07:27,630
xuất hiện ở dưới cùng của ba mục này trong Mục yêu thích của tôi.

111
00:07:27,630 --> 00:07:29,905
Khi tôi bấm nó ra, sau đó họ biến mất.

112
00:07:29,905 --> 00:07:36,750
Vì vậy, đây là một cách để bật các nút xóa trên My Favorites của bạn và sau đó.

113
00:07:36,750 --> 00:07:40,965
Vì vậy, hãy để tôi tiếp tục và xóa một trong các mục từ My Favorites.

114
00:07:40,965 --> 00:07:42,515
Vì vậy, khi tôi nhấp vào nút đó,

115
00:07:42,515 --> 00:07:47,540
bạn sẽ nhận thấy ngay rằng mục đó sẽ bị xóa khỏi mục yêu thích của tôi,

116
00:07:47,540 --> 00:07:50,405
và ngay lập tức biến mất và yêu thích của tôi được

117
00:07:50,405 --> 00:07:54,780
cập nhật và bạn sẽ thấy giá trị kết quả được hiển thị ở đây.

118
00:07:54,780 --> 00:07:56,115
Đồng thời, nút

119
00:07:56,115 --> 00:07:58,530
chuyển đổi Xóa này bị tắt,

120
00:07:58,530 --> 00:08:01,250
do đó các nút xóa không còn hiển thị nữa.

121
00:08:01,250 --> 00:08:07,610
Tôi luôn có thể bật lại các nút xóa bằng cách nhấp vào bật và tắt ở đây.

122
00:08:07,610 --> 00:08:11,210
Vì vậy, lưu ý rằng mục yêu thích của tôi sẽ được hiển thị chỉ

123
00:08:11,210 --> 00:08:15,790
cho người dùng đã đăng nhập vào hệ thống.

124
00:08:15,790 --> 00:08:21,260
Vì vậy, bạn ngay lập tức nhận thấy một tập hợp các thay đổi đã được

125
00:08:21,260 --> 00:08:23,540
thực hiện cho Angular Client để

126
00:08:23,540 --> 00:08:26,930
hỗ trợ một số tính năng bổ sung mà bạn thấy ở đây.

127
00:08:26,930 --> 00:08:31,190
Bạn cũng thấy tính năng Đăng nhập và Đăng xuất được hỗ trợ ở đây.

128
00:08:31,190 --> 00:08:33,000
Vì vậy, khi tôi nhấp vào nút Đăng xuất,

129
00:08:33,000 --> 00:08:35,930
bạn ngay lập tức nhận thấy rằng người dùng được đăng xuất

130
00:08:35,930 --> 00:08:39,800
và tên người dùng biến mất khỏi đó,

131
00:08:39,800 --> 00:08:44,250
và do đó nút cũng được biến thành nút Đăng nhập.

132
00:08:44,560 --> 00:08:49,760
Vì vậy, với điều này, bạn nhận thấy cách khách hàng Angular của tôi đã được

133
00:08:49,760 --> 00:08:54,880
cập nhật để sử dụng máy chủ REST API mới

134
00:08:54,880 --> 00:08:59,100
để hỗ trợ các mục yêu thích được lưu và ở phía máy chủ và

135
00:08:59,100 --> 00:09:04,930
sau đó tự động được phản ánh vào ứng dụng khách hàng của tôi như được hiển thị ở đây.

136
00:09:04,930 --> 00:09:08,305
Hãy tham gia một tour ngắn gọn thông qua

137
00:09:08,305 --> 00:09:14,160
các mã góc mà tôi đã cung cấp cho bạn trong kho lưu trữ GitHub,

138
00:09:14,160 --> 00:09:17,710
và cũng xem cách chúng tôi đã sửa đổi các phần của mã

139
00:09:17,710 --> 00:09:21,655
để thực hiện các ứng dụng Angular cập nhật.

140
00:09:21,655 --> 00:09:24,310
Bạn sẽ nhận thấy rằng có một dịch vụ mới

141
00:09:24,310 --> 00:09:27,130
mà tôi đã giới thiệu ở đây gọi là dịch vụ auth.

142
00:09:27,130 --> 00:09:29,295
Dịch vụ auth chăm sóc

143
00:09:29,295 --> 00:09:35,985
tất cả các hành động liên quan đến xác thực cho ứng dụng Angular.

144
00:09:35,985 --> 00:09:37,715
Vì vậy, trong dịch vụ auth,

145
00:09:37,715 --> 00:09:40,760
bạn sẽ ngay lập tức nhận thấy rằng tôi có

146
00:09:40,760 --> 00:09:45,545
một tập hợp các thông tin mà tôi đã cấu hình ở đây.

147
00:09:45,545 --> 00:09:47,985
Vì bạn đã biết Angular,

148
00:09:47,985 --> 00:09:52,535
bạn sẽ có thể dễ dàng xử lý bất cứ điều gì được viết ở đây.

149
00:09:52,535 --> 00:09:57,355
Lưu ý đặc biệt rằng trong bản thân dịch vụ auth,

150
00:09:57,355 --> 00:09:59,240
tôi đang lưu trữ thông tin như,

151
00:09:59,240 --> 00:10:00,815
ví dụ, TokenKey,

152
00:10:00,815 --> 00:10:06,985
đó là chìa khóa cho lưu trữ cục bộ nơi tôi lưu trữ JSON Web Token,

153
00:10:06,985 --> 00:10:11,500
và cũng có một số biến bổ sung

154
00:10:11,500 --> 00:10:16,310
ở đây, nơi tôi đang theo dõi tên người dùng và nơi tôi đang ở xác thực,

155
00:10:16,310 --> 00:10:21,955
và cũng theo dõi các mã thông báo Web JSON ở đây.

156
00:10:21,955 --> 00:10:28,540
Bây giờ, chúng ta hãy bắt đầu bằng cách xem khi người dùng đăng nhập.

157
00:10:28,540 --> 00:10:30,290
Vì vậy, khi người dùng đăng nhập,

158
00:10:30,290 --> 00:10:37,135
sau đó chức năng này được gọi là đăng nhập sẽ được gọi trong dịch vụ auth của chúng tôi ở đây,

159
00:10:37,135 --> 00:10:40,350
và khi đăng nhập được gọi trong dịch vụ auth,

160
00:10:40,350 --> 00:10:44,730
điều này sẽ được thông qua trong một tham số gọi là người dùng có chứa tên người

161
00:10:44,730 --> 00:10:49,665
dùng và mật khẩu như một phần của đối tượng JavaScript người dùng.

162
00:10:49,665 --> 00:10:57,890
Vì vậy, tại thời điểm này, tôi đang làm một bài đăng HTTP cho BaseURL cộng với người dùng/đăng nhập.

163
00:10:57,890 --> 00:11:00,320
Cũng lưu ý rằng ở đây,

164
00:11:00,320 --> 00:11:06,030
tôi cung cấp AuthResponse làm vòng loại ở đây.

165
00:11:06,030 --> 00:11:09,945
AuthResponse là gì ngoài một giao diện mà tôi đã thực hiện ở đây,

166
00:11:09,945 --> 00:11:11,350
ở trên cùng ở đây.

167
00:11:11,350 --> 00:11:14,295
Vì vậy, giao diện này về cơ bản xác định

168
00:11:14,295 --> 00:11:16,860
thông tin sẽ trở lại như

169
00:11:16,860 --> 00:11:19,670
phản hồi xác thực của tôi từ phía máy chủ,

170
00:11:19,670 --> 00:11:22,690
cấu trúc của dữ liệu JSON đang

171
00:11:22,690 --> 00:11:25,690
trở lại từ phía máy chủ và các đối tượng JavaScript tương ứng.

172
00:11:25,690 --> 00:11:28,865
Vì vậy, bạn nhận thấy rằng khi chúng tôi cập nhật máy chủ,

173
00:11:28,865 --> 00:11:32,370
chúng tôi đảm bảo rằng máy chủ đang gửi lại trạng thái,

174
00:11:32,370 --> 00:11:37,035
thành công, cờ và mã thông báo trong chỉ mục chuỗi.

175
00:11:37,035 --> 00:11:42,000
Vì vậy, thông tin đó được thu thập ở đây.

176
00:11:42,000 --> 00:11:44,240
Bây giờ, khi tôi đang làm một bài đăng trên đó,

177
00:11:44,240 --> 00:11:52,975
tôi đang đi qua trong tên người dùng và mật khẩu vào bài đăng trên điểm cuối /users/login này.

178
00:11:52,975 --> 00:11:58,375
Khi trả lời trở lại từ phản hồi,

179
00:11:58,375 --> 00:12:03,490
thông báo phản hồi sẽ chứa, như chúng ta đã thấy,

180
00:12:03,490 --> 00:12:06,525
sự thành công, trường mã thông báo,

181
00:12:06,525 --> 00:12:09,885
và cả thông báo trạng thái ở đây.

182
00:12:09,885 --> 00:12:11,950
Vì vậy, từ thông báo phản hồi,

183
00:12:11,950 --> 00:12:16,960
tôi đang trích xuất mã thông báo và sau đó chuyển nó vào chức năng này mà tôi thực hiện ở đây, chức năng

184
00:12:16,960 --> 00:12:20,415
cục bộ ở đây, được gọi là StoreUserCredentials.

185
00:12:20,415 --> 00:12:30,295
Vì vậy, điều đó sẽ được trả lại cho ứng dụng của tôi và sẽ được lưu trữ ở phía khách hàng của tôi,

186
00:12:30,295 --> 00:12:32,220
vào bộ nhớ cục bộ.

187
00:12:32,220 --> 00:12:34,545
Sau đó, từ chức năng này,

188
00:12:34,545 --> 00:12:37,870
tôi trả lại thông tin này trở lại

189
00:12:37,870 --> 00:12:43,160
chức năng gọi từ nơi tôi bắt đầu quá trình đăng nhập.

190
00:12:43,160 --> 00:12:51,610
Vì vậy, bằng cách này, tôi sẽ chỉ ra cho thành phần đăng nhập của tôi rằng đăng nhập đã thành công,

191
00:12:51,610 --> 00:12:56,345
và sau đó tôi cũng sẽ vượt qua tên người dùng để thành phần đăng nhập của tôi,

192
00:12:56,345 --> 00:12:59,680
sau đó sẽ vượt qua thông tin

193
00:12:59,680 --> 00:13:03,860
đó vào thành phần tiêu đề, và thành phần tiêu đề sử dụng để phản ánh tên người dùng

194
00:13:03,860 --> 00:13:08,830
vào thanh công cụ ở trên cùng có,

195
00:13:08,830 --> 00:13:11,145
và chúng tôi cũng bắt gặp lỗi ở đây.

196
00:13:11,145 --> 00:13:16,390
Vì vậy, đây là một thực hiện rất đơn giản về cách chúng tôi thực hiện đăng nhập.

197
00:13:16,390 --> 00:13:17,840
Khi bạn thực hiện đăng xuất, hãy

198
00:13:17,840 --> 00:13:20,735
chú ý những gì tôi làm khi người dùng gọi một đăng xuất.

199
00:13:20,735 --> 00:13:22,070
Khi người dùng gọi một đăng xuất,

200
00:13:22,070 --> 00:13:24,560
tôi chỉ đơn giản là phá hủy các thông tin đăng nhập của người dùng,

201
00:13:24,560 --> 00:13:26,845
bao gồm vứt bỏ

202
00:13:26,845 --> 00:13:33,085
JSON Web Token mà tôi đã thu được khi tôi đăng nhập vào ứng dụng của tôi.

203
00:13:33,085 --> 00:13:37,010
Sau đó, một số chức năng trợ giúp bổ sung mà tôi đã thực hiện ở đây gọi

204
00:13:37,010 --> 00:13:40,920
là GetUserName được đăng nhập và GetToken

205
00:13:40,920 --> 00:13:45,370
, sẽ hữu ích từ các ứng dụng khác của tôi,

206
00:13:45,370 --> 00:13:50,140
các thành phần và dịch vụ khác.

207
00:13:50,140 --> 00:13:57,375
Vì vậy, bây giờ chúng ta hãy nhìn vào một số chức năng trợ giúp mà chúng tôi đã thực hiện ở đây.

208
00:13:57,375 --> 00:14:04,685
Vì vậy, LoadUserCredentials sẽ lấy thông tin đăng nhập từ lưu trữ cục bộ.

209
00:14:04,685 --> 00:14:10,800
Vì vậy, bạn nhận thấy rằng ở đây tôi đang gọi LocalStorage và sau đó nói GetItem.

210
00:14:10,800 --> 00:14:12,750
Vì vậy, LocalStorage ở đây đang sử dụng lưu

211
00:14:12,750 --> 00:14:17,305
trữ cục bộ của trình duyệt web được hỗ trợ bởi

212
00:14:17,305 --> 00:14:19,140
các trình duyệt web tiêu chuẩn, và lưu trữ thông tin ở đó,

213
00:14:19,140 --> 00:14:21,620
và sau đó nó đang truy xuất thông tin này ở đó.

214
00:14:21,620 --> 00:14:23,830
Sau đó, từ đó, thông tin ủy nhiệm,

215
00:14:23,830 --> 00:14:25,745
nếu nó là hợp lệ,

216
00:14:25,745 --> 00:14:27,950
sau đó các thông tin ủy nhiệm sẽ được thiết lập ở đây.

217
00:14:27,950 --> 00:14:32,735
Vì vậy, tất cả các biến mà tôi đã xác định ở đây sẽ được khởi tạo với

218
00:14:32,735 --> 00:14:38,965
các thông tin thích hợp sau khi được truy xuất từ LocalStorage.

219
00:14:38,965 --> 00:14:42,560
Bây giờ, tương tự, chức năng StoreUserCredentials

220
00:14:42,560 --> 00:14:46,285
mà tôi đã thực hiện ở đây được gọi từ phương thức đăng nhập.

221
00:14:46,285 --> 00:14:50,165
Khi thông tin này được thông qua,

222
00:14:50,165 --> 00:14:52,290
thông tin ủy nhiệm được thông qua,

223
00:14:52,290 --> 00:14:57,665
thông tin đó được lưu trữ trong LocalStorage tại thời điểm này với chìa khóa đó.

224
00:14:57,665 --> 00:15:00,825
Sau đó, UseCredentials về cơ bản thiết

225
00:15:00,825 --> 00:15:05,510
lập tất cả các biến mà tôi có trong dịch vụ auth.

226
00:15:05,510 --> 00:15:07,285
Vì vậy, nó thiết lập mã thông báo,

227
00:15:07,285 --> 00:15:09,225
nó thiết lập tên người dùng,

228
00:15:09,225 --> 00:15:14,270
và sau đó nó thiết lập chức năng IsAuthenticated ở đây.

229
00:15:14,270 --> 00:15:17,590
Vì vậy, chú ý rằng tên người dùng chính nó ở đây,

230
00:15:17,590 --> 00:15:20,865
Tôi đã tuyên bố nó như là một chủ đề,

231
00:15:20,865 --> 00:15:23,595
đó là không có gì ngoài một quan sát ở đây.

232
00:15:23,595 --> 00:15:27,410
Vì vậy, đó là lý do tại sao bất cứ khi nào tôi nói,

233
00:15:27,410 --> 00:15:30,705
SendUserName ở đây, tôi nói uỷ nhiệm username.

234
00:15:30,705 --> 00:15:34,780
Vì vậy, SendUserName này thực hiện ngay ở trên cùng ở đây,

235
00:15:34,780 --> 00:15:40,080
nhận thấy rằng đây là nơi giá trị quan sát được gửi trở lại.

236
00:15:40,080 --> 00:15:43,305
Vì vậy, đó là lý do tại sao tôi nói tên người dùng này tiếp theo.

237
00:15:43,305 --> 00:15:45,370
Vì vậy, người quan sát được.

238
00:15:45,370 --> 00:15:49,630
Sẽ gửi lại tên được cung cấp như

239
00:15:49,630 --> 00:15:55,130
một tham số cho bất cứ ai đã đăng ký mình để quan sát điều này quan sát được.

240
00:15:55,130 --> 00:15:59,070
Vì vậy, điều này quan sát, tôi sẽ được quan sát điều này từ

241
00:15:59,070 --> 00:16:03,980
thành phần tiêu đề của tôi và do đó theo cách đó bất cứ khi nào tên người dùng thay đổi,

242
00:16:03,980 --> 00:16:09,870
hoặc từ undefined đến một tên người dùng nhất định hoặc ngược lại,

243
00:16:09,870 --> 00:16:13,040
sau đó tôi có thể cập nhật thanh công cụ của tôi trong

244
00:16:13,040 --> 00:16:17,670
thành phần tiêu đề để phản ánh cho dù người dùng đăng nhập hoặc đăng xuất.

245
00:16:17,670 --> 00:16:21,770
Vì vậy, đó là thiết lập bằng cách sử dụng này UseCredentials.

246
00:16:21,770 --> 00:16:29,010
Bây giờ các DestroyUserCredentials về cơ bản đặt mã thông báo xác thực để undefined.

247
00:16:29,010 --> 00:16:34,320
Nó xóa tên người dùng và sau đó thiết lập isAuthenticated để false và sau đó

248
00:16:34,320 --> 00:16:37,560
loại bỏ thông tin này từ cửa hàng địa phương

249
00:16:37,560 --> 00:16:40,930
của tôi nó vì vậy nó về cơ bản ném đi jsonwebtoken tại phần này.

250
00:16:40,930 --> 00:16:43,330
Vì vậy, đó là cách bạn yêu thích một người sử dụng.

251
00:16:43,330 --> 00:16:47,150
Vì vậy, một khi jsonwebtoken bị mất, người dùng không còn có thể

252
00:16:47,150 --> 00:16:49,850
xác thực bản thân mình hoặc chính mình

253
00:16:49,850 --> 00:16:53,305
ở phía máy chủ vì mã thông báo không còn khả dụng cho chúng tôi.

254
00:16:53,305 --> 00:16:58,340
Vì vậy, đó là cách chúng tôi thực hiện các chức năng đăng xuất trong ứng dụng của chúng tôi.

255
00:16:58,340 --> 00:17:01,030
Vì vậy, mất một thời gian để đi qua

256
00:17:01,030 --> 00:17:05,350
auth.service ở đây để xem làm thế nào tôi đã thực hiện các chức năng khác nhau.

257
00:17:05,350 --> 00:17:06,865
Bây giờ, bởi thời gian này,

258
00:17:06,865 --> 00:17:13,190
tôi chắc chắn bạn đã rất quen thuộc với cách ứng dụng Angular được thực hiện,

259
00:17:13,190 --> 00:17:17,960
vì vậy nó không phải là khó khăn cho bạn để hiểu làm thế nào mã này được thực hiện.

260
00:17:17,960 --> 00:17:24,575
Bây giờ một chức năng nữa mà tôi sẽ thu hút sự chú ý của bạn là thẻ kiểm tra JWT, ở đây.

261
00:17:24,575 --> 00:17:29,040
Chức năng này có thể được gọi tại bất kỳ thời điểm nào để kiểm tra và

262
00:17:29,040 --> 00:17:33,360
đảm bảo rằng mã thông báo web JSON của chúng tôi vẫn còn hợp lệ.

263
00:17:33,360 --> 00:17:40,500
Vì vậy, đây là nơi tôi gửi yêu cầu get cho người dùng dấu gạch chéo kiểm tra JWT token.

264
00:17:40,500 --> 00:17:49,450
Nhớ lại rằng chúng tôi đã thực hiện tuyến đường này ở phía máy chủ trong user's.js và.

265
00:17:49,450 --> 00:17:55,385
Vì vậy, từ đó chúng tôi sẽ có thể xác minh cho dù jsonwebtoken vẫn còn hợp lệ hay không.

266
00:17:55,385 --> 00:17:57,855
Nếu jsonwebtoken là không hợp lệ,

267
00:17:57,855 --> 00:17:59,170
sau đó chúng tôi sẽ phá hủy thông tin đăng

268
00:17:59,170 --> 00:18:03,045
nhập của người dùng và sau đó mong đợi người dùng để đăng nhập lại.

269
00:18:03,045 --> 00:18:06,550
Nếu jsonwebtoken là hợp lệ thì không sao và

270
00:18:06,550 --> 00:18:10,375
chúng tôi có thể tiến hành cho phép người dùng

271
00:18:10,375 --> 00:18:14,540
nhận ra rằng chúng tôi đã đăng nhập. Vì vậy, ngay cả khi bạn đóng

272
00:18:14,540 --> 00:18:18,665
trình duyệt của bạn và sau đó mở lại trình duyệt và sau đó mở lại ứng dụng Angular của bạn,

273
00:18:18,665 --> 00:18:26,625
nếu bạn đã đăng nhập trước đó và các jsonwebtoken đã được lưu vào bộ nhớ cục bộ,

274
00:18:26,625 --> 00:18:28,930
nó có thể được lấy từ đó và sau đó

275
00:18:28,930 --> 00:18:33,740
trạng thái đăng nhập của bạn sẽ được khôi phục trong ứng dụng Angular của bạn.

276
00:18:33,740 --> 00:18:36,420
Nếu mã thông báo web json hết hạn,

277
00:18:36,420 --> 00:18:38,635
thì chúng tôi sẽ không được phép đăng nhập.

278
00:18:38,635 --> 00:18:44,280
Vì vậy, mỗi khi bạn làm mới ứng dụng Angular của bạn trong trình duyệt

279
00:18:44,280 --> 00:18:47,290
của bạn hoặc tải lại ứng dụng Angular của bạn trong trình duyệt của bạn, bạn sẽ được

280
00:18:47,290 --> 00:18:50,550
kiểm tra jsonwebtoken để đảm bảo rằng nó vẫn còn hợp lệ.

281
00:18:50,550 --> 00:18:53,095
Nếu nó không hợp lệ thì người dùng sẽ

282
00:18:53,095 --> 00:18:56,200
bị xóa và vì vậy bạn sẽ phải đăng nhập lại.

283
00:18:56,200 --> 00:19:00,370
Nếu không, sau đó thông tin của người dùng đăng nhập được lấy

284
00:19:00,370 --> 00:19:05,020
từ LocalStorage và sau đó khởi tạo trong ứng dụng Angular của tôi.

285
00:19:05,020 --> 00:19:09,765
Định kỳ, nếu tại bất kỳ thời điểm nào trong thời gian máy chủ của bạn

286
00:19:09,765 --> 00:19:15,575
phản hồi với một thông điệp trái phép 401

287
00:19:15,575 --> 00:19:16,880
, ngay cả tại thời điểm đó,

288
00:19:16,880 --> 00:19:22,045
chúng tôi sẽ lại chéo để thấy rằng jsonwebtoken là hợp lệ và sau đó cho phép điều đó.

289
00:19:22,045 --> 00:19:26,960
Chúng tôi sẽ làm điều đó bằng cách sử dụng một cái gì đó gọi là Http chặn.

290
00:19:26,960 --> 00:19:30,630
Để tôi tham quan một phần của mã,

291
00:19:30,630 --> 00:19:35,180
và sau đó giải thích cho các bạn cách các máy bay đánh chặn hoạt động trong một thời gian ngắn.

292
00:19:35,180 --> 00:19:38,635
Vì vậy, bây giờ ngoài AuthService,

293
00:19:38,635 --> 00:19:45,545
trong thư mục dịch vụ chính nó, bạn sẽ thấy tệp này được gọi là tệp AuthInterceptors.ets.

294
00:19:45,545 --> 00:19:51,285
Vì vậy, mở này và bạn sẽ thấy rằng ở đây tôi đã thực hiện đánh chặn Http.

295
00:19:51,285 --> 00:19:54,435
Bây giờ những gì Http chặn này làm, điều

296
00:19:54,435 --> 00:20:00,780
này được hỗ trợ với các khách hàng Http mà đến như là một phần của Angular 4.4.

297
00:20:00,780 --> 00:20:04,080
Những gì các máy chặn http làm là họ có thể chặn các

298
00:20:04,080 --> 00:20:06,180
yêu cầu đi thư thực hiện

299
00:20:06,180 --> 00:20:09,695
sửa đổi thông điệp yêu cầu trước khi nó được gửi đi.

300
00:20:09,695 --> 00:20:13,530
Tương tự như vậy, chúng có thể chặn tin nhắn phản hồi đến và sau đó sửa đổi

301
00:20:13,530 --> 00:20:15,660
thông điệp phản hồi đến trước khi

302
00:20:15,660 --> 00:20:18,970
phản hồi được bàn giao cho ứng dụng Angular.

303
00:20:18,970 --> 00:20:22,920
Vậy thông qua việc đánh chặn, vậy chiếc máy bay đánh chặn này hoạt động như thế nào?

304
00:20:22,920 --> 00:20:25,625
Vì vậy, để làm cho máy chặn này hoạt động,

305
00:20:25,625 --> 00:20:28,620
chúng tôi thực hiện, như bạn thấy,

306
00:20:28,620 --> 00:20:37,285
một lớp được gọi là một HttpInterceptor bằng cách mở rộng HttpInterceptor.

307
00:20:37,285 --> 00:20:39,805
Vì vậy, ở đây tôi đã thực hiện AuthInterceptor.

308
00:20:39,805 --> 00:20:42,175
Vậy AuthInterceptor này làm gì?

309
00:20:42,175 --> 00:20:47,660
AuthInterceptor này về cơ bản là nắm bắt các yêu cầu đi.

310
00:20:47,660 --> 00:20:51,785
Vì vậy, để nắm bắt một yêu cầu đi, bạn gọi chức năng này được gọi là chặn

311
00:20:51,785 --> 00:20:56,700
và sau đó điều này sẽ cung cấp cho bạn truy cập vào yêu cầu và tiếp theo.

312
00:20:56,700 --> 00:21:00,550
Vì vậy, bạn có thể liên kết trong

313
00:21:00,550 --> 00:21:05,080
một loạt các máy đánh chặn một phía sau khác nếu bạn chọn

314
00:21:05,080 --> 00:21:11,050
để, để họ có thể xử lý các yêu cầu đi một cái khác nếu bạn chọn.

315
00:21:11,050 --> 00:21:20,260
Những gì chặn này làm là nó cung cấp cho bạn quyền truy cập vào thông điệp yêu cầu Http.

316
00:21:20,260 --> 00:21:23,300
Vì vậy, khi tôi nhận được quyền truy cập vào thông điệp yêu cầu Http,

317
00:21:23,300 --> 00:21:27,810
bạn sẽ nhận thấy rằng ở đây tôi đang tiêm dịch vụ auth.

318
00:21:27,810 --> 00:21:33,870
Bây giờ không giống như cách chúng tôi tiêm dịch vụ vào các thành phần,

319
00:21:33,870 --> 00:21:37,295
ở đây tôi đang cho thấy việc sử dụng một vòi phun.

320
00:21:37,295 --> 00:21:39,995
Một vòi phun là một phần của mã góc.

321
00:21:39,995 --> 00:21:44,080
Vì vậy, bằng cách sử dụng một vòi phun bạn có thể tiêm dịch vụ hoặc

322
00:21:44,080 --> 00:21:50,020
các thành phần khác vào các dịch vụ hoặc thành phần khác.

323
00:21:50,020 --> 00:21:57,495
Vì vậy, ở đây bạn thấy rằng tôi đang tiêm dịch vụ auth ở đây bằng cách sử dụng này.

324
00:21:57,495 --> 00:22:04,690
Bây giờ một lý do khác là nếu tôi trực tiếp tiêm dịch vụ vào constructor của tôi,

325
00:22:04,690 --> 00:22:11,545
nó sẽ phát triển một sự phụ thuộc tròn giữa interceptor và AuthService,

326
00:22:11,545 --> 00:22:15,200
và điều đó sẽ làm cho mã của bạn không hoạt động.

327
00:22:15,200 --> 00:22:18,190
Vì vậy, đây là một công việc xung quanh các vấn đề.

328
00:22:18,190 --> 00:22:21,430
Vì vậy mà máy đánh chặn của bạn- bởi vì tôi cần

329
00:22:21,430 --> 00:22:25,810
AuthService, để có được giữ của mã thông báo từ

330
00:22:25,810 --> 00:22:31,680
AuthService và AuthService lần lượt phụ thuộc vào máy đánh chặn này vì vậy đó là

331
00:22:31,680 --> 00:22:38,760
lý do tại sao để phá vỡ vòng lặp tôi rõ ràng tiêm AuthService trong trường hợp này.

332
00:22:38,760 --> 00:22:42,630
Bây giờ đây là một cái gì đó mà tôi đã tìm ra bằng cách thử nghiệm

333
00:22:42,630 --> 00:22:47,080
và lỗi tôi ban đầu đã đi trước và chỉ cần tiêm

334
00:22:47,080 --> 00:22:49,600
các dịch vụ lẻ cho các constructor và sau đó phát hiện ra rằng

335
00:22:49,600 --> 00:22:54,270
Angular đã không biên dịch mã sau đó tôi

336
00:22:54,270 --> 00:23:01,510
đã tìm ra rằng có một lỗi ở đó và sau đó sau khi thực hiện một số tìm kiếm của Google sau đó

337
00:23:01,510 --> 00:23:05,330
phát hiện ra rằng đây là một cách thay thế để xử lý

338
00:23:05,330 --> 00:23:09,620
cùng một điều và điều này hoạt động tốt hơn nhiều cho ứng dụng của chúng tôi.

339
00:23:09,620 --> 00:23:13,560
Vì vậy, một khi tôi tiêm AuthService từ dịch vụ tôi nhận được

340
00:23:13,560 --> 00:23:17,555
giữ của mã thông báo và sau đó nhận thấy những gì tôi đang làm ở đây.

341
00:23:17,555 --> 00:23:23,200
Ở đây tôi đang nói clone const auth req bản sao.

342
00:23:23,200 --> 00:23:29,380
Vì vậy, chúng tôi sẽ sao chép yêu cầu và sau đó chúng tôi sẽ thiết lập trong các tiêu đề.

343
00:23:29,380 --> 00:23:32,110
Vì vậy, chúng tôi sẽ nói req header thiết lập

344
00:23:32,110 --> 00:23:35,240
ủy quyền và sau đó nhận thấy những gì tôi đang

345
00:23:35,240 --> 00:23:38,005
thiết lập tiêu đề ủy quyền để được, người mang.

346
00:23:38,005 --> 00:23:42,100
Cộng với AuthToken.

347
00:23:42,100 --> 00:23:47,360
Vì vậy, trong tiêu đề ủy quyền tôi đang thiết lập người mang và AuthToken ở đây.

348
00:23:47,360 --> 00:23:49,550
Vì vậy, đó là cách tôi thiết lập

349
00:23:49,550 --> 00:23:53,080
tiêu đề ủy quyền

350
00:23:53,080 --> 00:23:57,465
trong thông báo yêu cầu đi trong ứng dụng Angular của tôi. Vậy ở ngay đó.

351
00:23:57,465 --> 00:24:01,660
Và đó là cách tôi đảm bảo rằng tất cả các yêu cầu đi sẽ

352
00:24:01,660 --> 00:24:06,645
có tiêu đề ủy quyền thiết lập trước khi chúng được chuyển đến phía máy chủ.

353
00:24:06,645 --> 00:24:12,775
Và sau đó, chúng tôi sẽ chỉ đơn giản là chuyển nó cho máy đánh chặn tiếp theo, nếu nó tồn tại,

354
00:24:12,775 --> 00:24:15,140
hoặc vào hàng đợi đi,

355
00:24:15,140 --> 00:24:19,935
do đó thông báo yêu cầu sẽ được gửi ra phía máy chủ.

356
00:24:19,935 --> 00:24:24,830
Tương tự như vậy, tôi có một máy đánh chặn khác mà tôi đã thực hiện ở đây. Máy

357
00:24:24,830 --> 00:24:30,260
chặn này chặn bất kỳ thư trả lời trái phép nào

358
00:24:30,260 --> 00:24:31,800
đang quay trở lại từ phía máy chủ.

359
00:24:31,800 --> 00:24:37,150
Vì vậy, nếu máy chủ trả lời với một 401 thư trả lời trái phép.

360
00:24:37,150 --> 00:24:39,550
Vì vậy, tại thời điểm đó một lần nữa, cùng một điều,

361
00:24:39,550 --> 00:24:42,760
tôi đã thiết lập AuthService ở đây,

362
00:24:42,760 --> 00:24:46,410
và sau đó, bên trong đây sau đó tôi sẽ nói,

363
00:24:46,410 --> 00:24:49,060
làm xử lý nếu lỗi.

364
00:24:49,060 --> 00:24:54,800
Vì vậy, đây là nơi tôi sẽ nhận được giữ của HttpEvent ở đây.

365
00:24:54,800 --> 00:25:04,580
HttpEvent là một đối tượng cấp thấp hơn so với một yêu cầu,

366
00:25:04,580 --> 00:25:08,630
nhưng điều đó cho phép chúng tôi để có được quyền truy cập vào các thư trả lời đến,

367
00:25:08,630 --> 00:25:12,530
và sau đó chúng tôi sẽ kiểm tra xem nếu có một lỗi,

368
00:25:12,530 --> 00:25:17,235
và sau đó nếu lỗi là một thể hiện của phản hồi lỗi HTTP,

369
00:25:17,235 --> 00:25:20,770
và nếu tình trạng lỗi là 401.

370
00:25:20,770 --> 00:25:28,220
Vì vậy, có nghĩa là tôi vừa phát hiện ra rằng máy chủ đã gửi lại một thông báo lỗi 401.

371
00:25:28,220 --> 00:25:32,305
Vì vậy, điều đó có nghĩa là có một số vấn đề ủy quyền ở phía máy chủ.

372
00:25:32,305 --> 00:25:33,790
Sau đó, tại thời điểm đó tôi sẽ

373
00:25:33,790 --> 00:25:37,620
kiểm tra mã thông báo web json để đảm bảo rằng mã thông báo web json vẫn còn hợp lệ.

374
00:25:37,620 --> 00:25:39,030
Nếu nó không hợp lệ,

375
00:25:39,030 --> 00:25:44,910
sau đó tôi sẽ loại bỏ thông tin đăng nhập của tôi và mong đợi người dùng đăng nhập lại tất cả.

376
00:25:44,910 --> 00:25:48,880
Vì vậy, theo cách đó tôi sẽ đảm bảo rằng nếu mã thông báo web json

377
00:25:48,880 --> 00:25:53,480
của tôi hết hạn trong quá trình cố gắng lấy dữ liệu,

378
00:25:53,480 --> 00:25:58,045
mà vẫn sẽ bị chặn bởi đây bởi vì nếu máy chủ phản ứng với một 401,

379
00:25:58,045 --> 00:26:00,280
tôi sẽ chặn đó và sau đó xóa

380
00:26:00,280 --> 00:26:03,830
mã thông báo web json của tôi và tôi mong đợi người dùng đăng nhập tất cả trên một lần nữa.

381
00:26:03,830 --> 00:26:08,750
Chúng tôi cũng có thể chuyển hướng người dùng đến trang đăng nhập nếu bạn muốn,

382
00:26:08,750 --> 00:26:12,330
nhưng với ứng dụng Angular nó phức tạp hơn một chút

383
00:26:12,330 --> 00:26:16,275
để làm điều đó và tôi không muốn nhầm lẫn bạn bằng cách làm tất cả những điều đó.

384
00:26:16,275 --> 00:26:19,385
Thay vào đó, tôi chỉ đơn giản là đăng xuất

385
00:26:19,385 --> 00:26:22,500
người dùng tại thời điểm này và sau đó phá hủy các thông tin đăng nhập người dùng,

386
00:26:22,500 --> 00:26:25,855
để người dùng sẽ được dự kiến đăng nhập vào thời điểm đó.

387
00:26:25,855 --> 00:26:33,880
Vì vậy, xử lý đơn giản như thế nào chúng tôi tiêm tiêu đề ủy quyền vào yêu cầu đi,

388
00:26:33,880 --> 00:26:38,850
và cũng chặn bất kỳ 401

389
00:26:38,850 --> 00:26:40,820
tin nhắn trái phép đang trở lại từ phía máy chủ.

390
00:26:40,820 --> 00:26:45,860
Vì vậy, bạn thấy làm thế nào những thay đổi bổ sung cần phải được

391
00:26:45,860 --> 00:26:51,955
thực hiện cho ứng dụng Angular của bạn để làm cho nó hoạt động với phía máy chủ của bạn.

392
00:26:51,955 --> 00:26:55,125
Với phần xác thực thiết lập trong,

393
00:26:55,125 --> 00:26:58,200
nếu bạn không có xác thực và nếu bạn chỉ đi để

394
00:26:58,200 --> 00:27:02,485
truy cập các điểm cuối API còn lại và làm nhận được các hoạt động,

395
00:27:02,485 --> 00:27:05,240
bạn thậm chí không cần phải lo lắng về bất kỳ của những điều này.

396
00:27:05,240 --> 00:27:06,790
Không yêu cầu xác thực.

397
00:27:06,790 --> 00:27:09,140
Dữ liệu có thể được lấy rất dễ dàng.

398
00:27:09,140 --> 00:27:10,590
Nhưng đối với bất kỳ bài đăng nào,

399
00:27:10,590 --> 00:27:12,395
đặt và xóa các hoạt động,

400
00:27:12,395 --> 00:27:15,630
chúng ta cần hỗ trợ tất cả các tính năng này.

401
00:27:15,630 --> 00:27:21,375
Vì vậy, đó là lý do tại sao tôi đã thực hiện phần xác thực vào ứng dụng của tôi.

402
00:27:21,375 --> 00:27:23,995
Cũng như tôi đã minh họa trước đó,

403
00:27:23,995 --> 00:27:26,985
khi không có người dùng được đăng nhập,

404
00:27:26,985 --> 00:27:32,570
sau đó chúng tôi sẽ không thể điều hướng đến điểm cuối yêu thích của tôi,

405
00:27:32,570 --> 00:27:35,035
nhưng khi người dùng được đăng nhập,

406
00:27:35,035 --> 00:27:40,420
sau đó chúng tôi sẽ có thể xem mục yêu thích của tôi cho người dùng cụ thể.

407
00:27:40,420 --> 00:27:45,095
Điều này được thực hiện bằng cách sử dụng bảo vệ tuyến đường trong Angular.

408
00:27:45,095 --> 00:27:47,995
Bây giờ để thực hiện các bảo vệ tuyến đường,

409
00:27:47,995 --> 00:27:52,080
tôi đã thực hiện một dịch vụ khác ở đây được gọi là AuthGuardService.

410
00:27:52,080 --> 00:27:54,170
Vì vậy, trong AuthGuardService này,

411
00:27:54,170 --> 00:27:57,970
chúng tôi thực hiện phương pháp này gọi là CanActivate method mà

412
00:27:57,970 --> 00:28:02,225
chúng tôi sẽ phân lớp con để thực hiện điều này.

413
00:28:02,225 --> 00:28:05,705
Và trong phương pháp CanActivate,

414
00:28:05,705 --> 00:28:08,550
việc thực hiện sẽ trả về một boolean,

415
00:28:08,550 --> 00:28:10,090
và trong trường hợp này,

416
00:28:10,090 --> 00:28:15,630
những gì chúng tôi kiểm tra là nếu người dùng này được đăng nhập,

417
00:28:15,630 --> 00:28:18,605
sau đó chúng tôi sẽ cho phép người dùng điều hướng.

418
00:28:18,605 --> 00:28:25,480
Nếu không, bạn sẽ điều hướng người dùng đến điểm cuối nhà.

419
00:28:25,480 --> 00:28:31,175
Vì vậy, đó là cách bảo vệ tuyến đường được thực hiện trong trường hợp này.

420
00:28:31,175 --> 00:28:33,955
Bây giờ, để sử dụng bảo vệ tuyến đường này,

421
00:28:33,955 --> 00:28:41,780
chúng tôi sẽ đi xem làm thế nào các tuyến đường được cập nhật để sử dụng các tuyến đường bảo vệ tuyến đường.

422
00:28:41,780 --> 00:28:44,520
Vì vậy, trong các định tuyến tập tin,

423
00:28:44,520 --> 00:28:50,435
bạn có thể thấy rằng đối với các thành phần yêu thích,

424
00:28:50,435 --> 00:28:54,510
chúng ta thấy rằng chúng ta chỉ định đường dẫn như mục yêu thích và các thành phần như

425
00:28:54,510 --> 00:28:58,620
FavoritesComponent và sau đó chúng ta chỉ định lĩnh vực này khác

426
00:28:58,620 --> 00:29:07,785
được gọi là CanActivate mà chúng ta chỉ định AuthGuard là tham số ở đây,

427
00:29:07,785 --> 00:29:12,445
và điều này AuthGuard không là gì ngoài dịch vụ AuthGuard mà chúng tôi đã thực hiện,

428
00:29:12,445 --> 00:29:14,825
được nhập khẩu ở đây.

429
00:29:14,825 --> 00:29:20,405
Vì vậy, theo cách này khi AuthGuard đánh giá là sai,

430
00:29:20,405 --> 00:29:24,755
sau đó bạn sẽ không được phép điều hướng đến thành phần yêu thích

431
00:29:24,755 --> 00:29:28,105
, thay vào đó, bạn sẽ được chuyển hướng đến nhà,

432
00:29:28,105 --> 00:29:36,245
nhưng khi người dùng được đăng nhập sau đó rõ ràng AuthGuard sẽ đánh giá đúng,

433
00:29:36,245 --> 00:29:37,390
và trong trường hợp này,

434
00:29:37,390 --> 00:29:41,665
sau đó bạn sẽ có thể để điều hướng đến tuyến đường ưa thích ở đó.

435
00:29:41,665 --> 00:29:49,700
Bây giờ cũng tương tự như vậy có những sửa đổi nhỏ đối với các thành phần còn lại trong

436
00:29:49,700 --> 00:29:52,200
đó, cho phép bạn để đối phó với

437
00:29:52,200 --> 00:29:57,365
những phức tạp của cách khách hàng và máy chủ của bạn sẽ nói chuyện với nhau.

438
00:29:57,365 --> 00:30:02,555
Đặc biệt, lưu ý làm thế nào các thành phần tiêu đề đã được cập nhật để

439
00:30:02,555 --> 00:30:08,195
phản ánh trạng thái đăng nhập của người dùng trong thanh công cụ ở trên cùng.

440
00:30:08,195 --> 00:30:11,500
Đó là một thay đổi thú vị khác mà tôi đã

441
00:30:11,500 --> 00:30:15,710
thực hiện cho các thành phần tiêu đề trong ứng dụng của chúng tôi.

442
00:30:15,710 --> 00:30:20,220
Vì vậy, tôi sẽ để nó như là một bài tập để bạn tìm ra cách mà nó đã được thực hiện.

443
00:30:20,220 --> 00:30:22,160
Mã rất đơn giản ở đó.

444
00:30:22,160 --> 00:30:24,660
Sẽ dễ dàng cho anh để tìm ra điều đó.

445
00:30:24,660 --> 00:30:28,020
Vì vậy, với tất cả những thay đổi này, bây giờ,

446
00:30:28,020 --> 00:30:32,095
khách hàng góc cạnh của tôi có thể tương tác với máy chủ của tôi.

447
00:30:32,095 --> 00:30:36,540
Hãy để tôi cho bạn thấy làm thế nào chúng tôi có thể đăng một số nhận xét lên máy chủ,

448
00:30:36,540 --> 00:30:41,995
và sau đó xem nhận xét ngay lập tức phản ánh vào món ăn.

449
00:30:41,995 --> 00:30:45,325
Vì vậy, một lần nữa quay trở lại ứng dụng của chúng

450
00:30:45,325 --> 00:30:50,050
tôi, bây giờ chúng ta có thể đi đến menu và sau đó kéo lên bất kỳ món ăn ở đây,

451
00:30:50,050 --> 00:30:52,740
và tôi có thể gửi ý kiến cho món ăn ở đây,

452
00:30:52,740 --> 00:30:59,600
vì vậy tôi sẽ ngay lập tức thiết lập đánh giá ở đây,

453
00:30:59,600 --> 00:31:02,540
và giá trị bình luận của tôi ở đây.

454
00:31:03,540 --> 00:31:06,700
Chú ý rằng tôi không nhập tên

455
00:31:06,700 --> 00:31:15,735
người dùng hoặc tên tác giả của tôi ở đây trong biểu mẫu ở đây.

456
00:31:15,735 --> 00:31:18,470
Bây giờ tất nhiên, để gửi bình luận,

457
00:31:18,470 --> 00:31:19,590
bạn cần phải đăng nhập.

458
00:31:19,590 --> 00:31:24,520
Vì vậy, nếu bạn không đăng nhập bình luận này sẽ không được chấp nhận bởi máy chủ của tôi.

459
00:31:24,520 --> 00:31:26,935
Vì vậy, hãy để tôi đăng nhập vào bản thân mình trước tiên.

460
00:31:26,935 --> 00:31:32,890
Vì vậy, tôi có thể đăng nhập ở đây.

461
00:31:32,890 --> 00:31:34,220
Và thời điểm tôi đăng nhập,

462
00:31:34,220 --> 00:31:39,255
bạn ngay lập tức nhận thấy rằng tiêu đề thanh công cụ được cập nhật để chỉ ra trạng thái của tôi.

463
00:31:39,255 --> 00:31:41,375
Bây giờ tôi có thể đăng bình luận này.

464
00:31:41,375 --> 00:31:43,990
Và bạn sẽ nhận thấy rằng khi tôi đăng bình luận,

465
00:31:43,990 --> 00:31:46,440
nhận xét được thêm vào danh sách các nhận xét,

466
00:31:46,440 --> 00:31:50,575
và cũng nhận thấy rằng trường tác giả được tự động điền vào đây.

467
00:31:50,575 --> 00:31:54,040
Bởi vì đó là cách chúng tôi thiết lập phía máy chủ của chúng tôi.

468
00:31:54,040 --> 00:31:55,570
Trong trường nhận xét,

469
00:31:55,570 --> 00:31:58,880
chúng tôi đã thiết lập người dùng của chúng tôi như

470
00:31:58,880 --> 00:32:05,890
là một tham chiếu đến thông tin người dùng

471
00:32:05,890 --> 00:32:09,755
mà chúng tôi lưu trữ ở phía máy chủ của chúng tôi, và kể từ khi chúng tôi sử dụng

472
00:32:11,585 --> 00:32:14,080
cư trú, Mongoose Populate ở phía máy chủ, thông tin người dùng được tự động

473
00:32:14,080 --> 00:32:16,715
chuyển vào các nhận xét đến từ máy chủ bên.

474
00:32:16,715 --> 00:32:21,130
Vì vậy, đó là cách bạn nhận thấy làm thế nào tôi đang tận dụng

475
00:32:21,130 --> 00:32:25,615
những gì máy chủ đã cung cấp cho tôi để tự động điền vào các chi tiết.

476
00:32:25,615 --> 00:32:31,180
Vì vậy, những thay đổi nhỏ một lần nữa ngay cả

477
00:32:31,180 --> 00:32:38,880
vào trang chi tiết món ăn để phản ánh việc sử dụng các ý kiến hỗ trợ ở phía máy chủ.

478
00:32:38,880 --> 00:32:43,769
Với điều này tôi hoàn thành minh họa nhanh chóng

479
00:32:43,769 --> 00:32:49,575
của khách hàng Angular mà chúng tôi đã thực hiện như là một phần của bài tập này.

480
00:32:49,575 --> 00:32:55,990
Và tôi hy vọng rằng bạn đi qua các chi tiết của mã trong các khách hàng góc cũng,

481
00:32:55,990 --> 00:32:59,410
và sau đó phản ánh lại về những gì bạn đã học được trong các khóa học Angular và xem

482
00:32:59,410 --> 00:33:03,105
làm thế nào các sửa đổi cho phép chúng tôi thực hiện

483
00:33:03,105 --> 00:33:06,350
trong một sửa đổi góc khách hàng mà bây giờ

484
00:33:06,350 --> 00:33:09,705
có thể giao tiếp với các máy chủ và sau đó hỗ trợ tất cả các tính năng

485
00:33:09,705 --> 00:33:17,310
mà chúng tôi dự định ban đầu để thực hiện như là một phần của cả khách hàng và phía máy chủ.