Bây giờ chúng tôi đã hoàn tất cập nhật phía máy chủ,
đó là thời gian để chuyển sang Angular Client.
Để thuận tiện cho bạn, tôi đã cung cấp cho bạn
kho lưu trữ GitHub có chứa phiên bản cuối cùng của
Angular Client có thể giao tiếp với
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.
Vì vậy, tôi đã thực hiện các ứng dụng Angular mà chúng tôi
phát triển trong khóa học thứ hai của chuyên môn này,
và sau đó sửa đổi nó.
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 đó.
Bây giờ, bạn sẽ sao chép kho lưu trữ Git vào máy tính của bạn,
và sau đó khởi động máy khách Angular của bạn,
và sau đó nhìn thấy nó giao tiếp với phía máy chủ của chúng tôi.
Hãy xem chi tiết tiếp theo.
Để bắt đầu với bài tập này,
tại cửa sổ thiết bị đầu cuối hoặc lệnh
của bạn, hãy đi đến vị trí thuận tiện của bạn và sau đó tại
dấu nhắc gõ git clone
https://github.com/jmuppala/conFusion-Angular6.git.
Sau đó, để cho ứng dụng Angular được nhân bản vào máy tính của bạn.
Sau khi nhân bản hoàn tất,
di chuyển đến thư mục Confusion-angular6
vừa được tạo ra khi bạn sao chép kho git này.
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ó.
Bây giờ, tại dấu nhắc, gõ npm cài đặt,
để cài đặt tất cả các mô-đun nút
mà ứng dụng Angular này phụ thuộc vào.
Vì vậy, một khi các mô-đun nút hoặc tất cả cài đặt,
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.
Một khi tất cả mọi thứ được cài đặt bởi npm install,
sau đó đảm bảo rằng MongoDB Server của bạn
đang hoạt động và cũng là REST API Server của bạn cũng đang hoạt động và chạy.
Nếu không, Angular Client của bạn sẽ không hoạt động.
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,
tại các loại nhắc ng phục vụ và
ứ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.
Một khi ứng dụng Angular của bạn được biên dịch thành công,
sau đó đi đến một trình duyệt và mở ứng dụng Angular của bạn trong trình duyệt.
Đi đến trình duyệt,
tại thanh địa chỉ,
hãy để tôi gõ vào localhost:4200 và
bạn sẽ thấy rằng ứng dụng Angular của bạn được
khởi động và có thể nhìn thấy trên màn hình ở đây.
Bạn sẽ nhận thấy ngay lập tức rằng ứng dụng Angular của bạn
có thể lấy dữ liệu từ máy chủ và sau đó hiển thị
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
đã làm ở phần cuối của khóa học Angular của bạn.
Khi bạn đi để nói về thư mục,
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.
Trong menu, bạn thấy các mục trong menu được
hiển thị giống như chúng ta đã thấy với ứng dụng Angular.
Bây giờ, ngoài ra, tôi đã thêm vào
một trang nữa vào ứng dụng trang đơn gọi là My Favorites,
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.
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.
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,
bởi vì bạn không biết người dùng nào,
như mục yêu thích, nên được hiển thị ở đây.
Trang liên hệ như thường lệ.
Bây giờ, hãy đăng nhập.
Để đăng nhập vào ứng dụng của
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.
Sau đó, hãy để tôi đăng nhập như là một trong những người dùng đã đăng ký,
mà chúng tôi đã đăng ký như là một phần của khóa học này trước đó.
Vì vậy, một khi bạn đăng nhập,
bạn sẽ ngay lập tức nhận thấy rằng
, ở góc phải,
bạn thấy nút Đăng nhập đã biến thành
Đăng xuất và tên của Người dùng được chỉ định ở đây.
Vì vậy, bất cứ ai đăng nhập được chỉ ra ở đây.
Bạn cũng có thể, về nguyên tắc,
thay thế điều này bằng hình ảnh của người dùng.
Bây giờ, cho rằng bạn cần phải làm nhiều sửa đổi hơn cho
cả máy khách và máy chủ để hỗ trợ hiển thị hình ảnh ở đây.
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
có thể dễ dàng hiển thị thông tin người dùng ở đây.
Vì vậy, điều này đòi hỏi phải sửa đổi nhỏ cho người đứng đầu của
thành phần nơi tôi sẽ có thể truy xuất
tên người dùng từ một dịch vụ
được gọi là dịch vụ OAuth mà chúng ta sẽ nói về trong một thời gian ngắn.
Vì vậy, một khi người dùng đăng nhập,
sau đó nếu bạn bấm vào Mục yêu thích của tôi,
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.
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.
Vì vậy, bây giờ chúng ta hãy vào Menu và sau đó trong Menu,
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.
Vì vậy, đi xuống dưới đây,
bạn thấy biểu tượng trái tim ở đó,
nhấp vào đó và bạn sẽ thấy rằng điều này sẽ được thêm vào The Favorites.
Thực tế là điều này đã được thêm vào The Favorites được chỉ ra bởi
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.
Bây giờ, nếu bạn đi đến bất kỳ món ăn nào khác,
bạn sẽ nhận thấy rằng điều này có một trái tim không đầy, có
nghĩa là điều này chưa được ưa thích của chúng tôi.
Vì vậy, hãy để tôi thêm vào một mục nữa vào mục
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.
Vì vậy, bây giờ, bạn sẽ thấy rằng nếu bây giờ tôi đi đến My Favorites,
bạn sẽ thấy một tập hợp các My Favorites được hiển thị ở đây.
Vì vậy, bạn thấy rằng tôi chỉ cần thêm ba món ăn vào My Favorites.
Vì vậy, chúng đang được hiển thị ở đây.
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ủ,
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.
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.
Bây giờ, chúng ta cũng có thể sửa đổi yêu thích của tôi.
Vì vậy, ví dụ, ở góc phải ở đây,
bạn thấy nút chuyển đổi Xóa này ở đây.
Vì vậy, để tôi bật nó lên.
Vì vậy, khi bạn bật tính năng này,
bạn ngay lập tức thấy ba chữ thập màu đỏ
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.
Khi tôi bấm nó ra, sau đó họ biến mất.
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 đó.
Vì vậy, hãy để tôi tiếp tục và xóa một trong các mục từ My Favorites.
Vì vậy, khi tôi nhấp vào nút đó,
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,
và ngay lập tức biến mất và yêu thích của tôi được
cập nhật và bạn sẽ thấy giá trị kết quả được hiển thị ở đây.
Đồng thời, nút
chuyển đổi Xóa này bị tắt,
do đó các nút xóa không còn hiển thị nữa.
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.
Vì vậy, lưu ý rằng mục yêu thích của tôi sẽ được hiển thị chỉ
cho người dùng đã đăng nhập vào hệ thống.
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
thực hiện cho Angular Client để
hỗ trợ một số tính năng bổ sung mà bạn thấy ở đây.
Bạn cũng thấy tính năng Đăng nhập và Đăng xuất được hỗ trợ ở đây.
Vì vậy, khi tôi nhấp vào nút Đăng xuất,
bạn ngay lập tức nhận thấy rằng người dùng được đăng xuất
và tên người dùng biến mất khỏi đó,
và do đó nút cũng được biến thành nút Đăng nhập.
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
cập nhật để sử dụng máy chủ REST API mới
để hỗ trợ các mục yêu thích được lưu và ở phía máy chủ và
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.
Hãy tham gia một tour ngắn gọn thông qua
các mã góc mà tôi đã cung cấp cho bạn trong kho lưu trữ GitHub,
và cũng xem cách chúng tôi đã sửa đổi các phần của mã
để thực hiện các ứng dụng Angular cập nhật.
Bạn sẽ nhận thấy rằng có một dịch vụ mới
mà tôi đã giới thiệu ở đây gọi là dịch vụ auth.
Dịch vụ auth chăm sóc
tất cả các hành động liên quan đến xác thực cho ứng dụng Angular.
Vì vậy, trong dịch vụ auth,
bạn sẽ ngay lập tức nhận thấy rằng tôi có
một tập hợp các thông tin mà tôi đã cấu hình ở đây.
Vì bạn đã biết Angular,
bạn sẽ có thể dễ dàng xử lý bất cứ điều gì được viết ở đây.
Lưu ý đặc biệt rằng trong bản thân dịch vụ auth,
tôi đang lưu trữ thông tin như,
ví dụ, TokenKey,
đó là chìa khóa cho lưu trữ cục bộ nơi tôi lưu trữ JSON Web Token,
và cũng có một số biến bổ sung
ở đâ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,
và cũng theo dõi các mã thông báo Web JSON ở đây.
Bây giờ, chúng ta hãy bắt đầu bằng cách xem khi người dùng đăng nhập.
Vì vậy, khi người dùng đăng nhập,
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,
và khi đăng nhập được gọi trong dịch vụ auth,
đ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
dùng và mật khẩu như một phần của đối tượng JavaScript người dùng.
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.
Cũng lưu ý rằng ở đây,
tôi cung cấp AuthResponse làm vòng loại ở đây.
AuthResponse là gì ngoài một giao diện mà tôi đã thực hiện ở đây,
ở trên cùng ở đây.
Vì vậy, giao diện này về cơ bản xác định
thông tin sẽ trở lại như
phản hồi xác thực của tôi từ phía máy chủ,
cấu trúc của dữ liệu JSON đang
trở lại từ phía máy chủ và các đối tượng JavaScript tương ứng.
Vì vậy, bạn nhận thấy rằng khi chúng tôi cập nhật máy chủ,
chúng tôi đảm bảo rằng máy chủ đang gửi lại trạng thái,
thành công, cờ và mã thông báo trong chỉ mục chuỗi.
Vì vậy, thông tin đó được thu thập ở đây.
Bây giờ, khi tôi đang làm một bài đăng trên đó,
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.
Khi trả lời trở lại từ phản hồi,
thông báo phản hồi sẽ chứa, như chúng ta đã thấy,
sự thành công, trường mã thông báo,
và cả thông báo trạng thái ở đây.
Vì vậy, từ thông báo phản hồi,
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
cục bộ ở đây, được gọi là StoreUserCredentials.
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,
vào bộ nhớ cục bộ.
Sau đó, từ chức năng này,
tôi trả lại thông tin này trở lại
chức năng gọi từ nơi tôi bắt đầu quá trình đăng nhập.
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,
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,
sau đó sẽ vượt qua thông tin
đó 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
vào thanh công cụ ở trên cùng có,
và chúng tôi cũng bắt gặp lỗi ở đây.
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.
Khi bạn thực hiện đăng xuất, hãy
chú ý những gì tôi làm khi người dùng gọi một đăng xuất.
Khi người dùng gọi một đăng xuất,
tôi chỉ đơn giản là phá hủy các thông tin đăng nhập của người dùng,
bao gồm vứt bỏ
JSON Web Token mà tôi đã thu được khi tôi đăng nhập vào ứng dụng của tôi.
Sau đó, một số chức năng trợ giúp bổ sung mà tôi đã thực hiện ở đây gọi
là GetUserName được đăng nhập và GetToken
, sẽ hữu ích từ các ứng dụng khác của tôi,
các thành phần và dịch vụ khác.
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.
Vì vậy, LoadUserCredentials sẽ lấy thông tin đăng nhập từ lưu trữ cục bộ.
Vì vậy, bạn nhận thấy rằng ở đây tôi đang gọi LocalStorage và sau đó nói GetItem.
Vì vậy, LocalStorage ở đây đang sử dụng lưu
trữ cục bộ của trình duyệt web được hỗ trợ bởi
các trình duyệt web tiêu chuẩn, và lưu trữ thông tin ở đó,
và sau đó nó đang truy xuất thông tin này ở đó.
Sau đó, từ đó, thông tin ủy nhiệm,
nếu nó là hợp lệ,
sau đó các thông tin ủy nhiệm sẽ được thiết lập ở đây.
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
các thông tin thích hợp sau khi được truy xuất từ LocalStorage.
Bây giờ, tương tự, chức năng StoreUserCredentials
mà tôi đã thực hiện ở đây được gọi từ phương thức đăng nhập.
Khi thông tin này được thông qua,
thông tin ủy nhiệm được thông qua,
thông tin đó được lưu trữ trong LocalStorage tại thời điểm này với chìa khóa đó.
Sau đó, UseCredentials về cơ bản thiết
lập tất cả các biến mà tôi có trong dịch vụ auth.
Vì vậy, nó thiết lập mã thông báo,
nó thiết lập tên người dùng,
và sau đó nó thiết lập chức năng IsAuthenticated ở đây.
Vì vậy, chú ý rằng tên người dùng chính nó ở đây,
Tôi đã tuyên bố nó như là một chủ đề,
đó là không có gì ngoài một quan sát ở đây.
Vì vậy, đó là lý do tại sao bất cứ khi nào tôi nói,
SendUserName ở đây, tôi nói uỷ nhiệm username.
Vì vậy, SendUserName này thực hiện ngay ở trên cùng ở đây,
nhận thấy rằng đây là nơi giá trị quan sát được gửi trở lại.
Vì vậy, đó là lý do tại sao tôi nói tên người dùng này tiếp theo.
Vì vậy, người quan sát được.
Sẽ gửi lại tên được cung cấp như
một tham số cho bất cứ ai đã đăng ký mình để quan sát điều này quan sát được.
Vì vậy, điều này quan sát, tôi sẽ được quan sát điều này từ
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,
hoặc từ undefined đến một tên người dùng nhất định hoặc ngược lại,
sau đó tôi có thể cập nhật thanh công cụ của tôi trong
thành phần tiêu đề để phản ánh cho dù người dùng đăng nhập hoặc đăng xuất.
Vì vậy, đó là thiết lập bằng cách sử dụng này UseCredentials.
Bây giờ các DestroyUserCredentials về cơ bản đặt mã thông báo xác thực để undefined.
Nó xóa tên người dùng và sau đó thiết lập isAuthenticated để false và sau đó
loại bỏ thông tin này từ cửa hàng địa phương
của tôi nó vì vậy nó về cơ bản ném đi jsonwebtoken tại phần này.
Vì vậy, đó là cách bạn yêu thích một người sử dụng.
Vì vậy, một khi jsonwebtoken bị mất, người dùng không còn có thể
xác thực bản thân mình hoặc chính mình
ở phía máy chủ vì mã thông báo không còn khả dụng cho chúng tôi.
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.
Vì vậy, mất một thời gian để đi qua
auth.service ở đây để xem làm thế nào tôi đã thực hiện các chức năng khác nhau.
Bây giờ, bởi thời gian này,
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,
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.
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.
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à
đả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ệ.
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.
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à.
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.
Nếu jsonwebtoken là không hợp lệ,
sau đó chúng tôi sẽ phá hủy thông tin đăng
nhập của người dùng và sau đó mong đợi người dùng để đăng nhập lại.
Nếu jsonwebtoken là hợp lệ thì không sao và
chúng tôi có thể tiến hành cho phép người dùng
nhận ra rằng chúng tôi đã đăng nhập. Vì vậy, ngay cả khi bạn đóng
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,
nếu bạn đã đăng nhập trước đó và các jsonwebtoken đã được lưu vào bộ nhớ cục bộ,
nó có thể được lấy từ đó và sau đó
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.
Nếu mã thông báo web json hết hạn,
thì chúng tôi sẽ không được phép đăng nhập.
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
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
kiểm tra jsonwebtoken để đảm bảo rằng nó vẫn còn hợp lệ.
Nếu nó không hợp lệ thì người dùng sẽ
bị xóa và vì vậy bạn sẽ phải đăng nhập lại.
Nếu không, sau đó thông tin của người dùng đăng nhập được lấy
từ LocalStorage và sau đó khởi tạo trong ứng dụng Angular của tôi.
Đị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
phản hồi với một thông điệp trái phép 401
, ngay cả tại thời điểm đó,
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 đó.
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.
Để tôi tham quan một phần của mã,
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.
Vì vậy, bây giờ ngoài AuthService,
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.
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.
Bây giờ những gì Http chặn này làm, điều
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.
Những gì các máy chặn http làm là họ có thể chặn các
yêu cầu đi thư thực hiện
sửa đổi thông điệp yêu cầu trước khi nó được gửi đi.
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
thông điệp phản hồi đến trước khi
phản hồi được bàn giao cho ứng dụng Angular.
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?
Vì vậy, để làm cho máy chặn này hoạt động,
chúng tôi thực hiện, như bạn thấy,
một lớp được gọi là một HttpInterceptor bằng cách mở rộng HttpInterceptor.
Vì vậy, ở đây tôi đã thực hiện AuthInterceptor.
Vậy AuthInterceptor này làm gì?
AuthInterceptor này về cơ bản là nắm bắt các yêu cầu đi.
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
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.
Vì vậy, bạn có thể liên kết trong
một loạt các máy đánh chặn một phía sau khác nếu bạn chọn
để, để họ có thể xử lý các yêu cầu đi một cái khác nếu bạn chọn.
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.
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,
bạn sẽ nhận thấy rằng ở đây tôi đang tiêm dịch vụ auth.
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,
ở đây tôi đang cho thấy việc sử dụng một vòi phun.
Một vòi phun là một phần của mã góc.
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
các thành phần khác vào các dịch vụ hoặc thành phần khác.
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.
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,
nó sẽ phát triển một sự phụ thuộc tròn giữa interceptor và AuthService,
và điều đó sẽ làm cho mã của bạn không hoạt động.
Vì vậy, đây là một công việc xung quanh các vấn đề.
Vì vậy mà máy đánh chặn của bạn- bởi vì tôi cần
AuthService, để có được giữ của mã thông báo từ
AuthService và AuthService lần lượt phụ thuộc vào máy đánh chặn này vì vậy đó là
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.
Bây giờ đây là một cái gì đó mà tôi đã tìm ra bằng cách thử nghiệm
và lỗi tôi ban đầu đã đi trước và chỉ cần tiêm
các dịch vụ lẻ cho các constructor và sau đó phát hiện ra rằng
Angular đã không biên dịch mã sau đó tôi
đã 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 đó
phát hiện ra rằng đây là một cách thay thế để xử lý
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.
Vì vậy, một khi tôi tiêm AuthService từ dịch vụ tôi nhận được
giữ của mã thông báo và sau đó nhận thấy những gì tôi đang làm ở đây.
Ở đây tôi đang nói clone const auth req bản sao.
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 đề.
Vì vậy, chúng tôi sẽ nói req header thiết lập
ủy quyền và sau đó nhận thấy những gì tôi đang
thiết lập tiêu đề ủy quyền để được, người mang.
Cộng với AuthToken.
Vì vậy, trong tiêu đề ủy quyền tôi đang thiết lập người mang và AuthToken ở đây.
Vì vậy, đó là cách tôi thiết lập
tiêu đề ủy quyền
trong thông báo yêu cầu đi trong ứng dụng Angular của tôi. Vậy ở ngay đó.
Và đó là cách tôi đảm bảo rằng tất cả các yêu cầu đi sẽ
có tiêu đề ủy quyền thiết lập trước khi chúng được chuyển đến phía máy chủ.
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,
hoặc vào hàng đợi đi,
do đó thông báo yêu cầu sẽ được gửi ra phía máy chủ.
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
chặn này chặn bất kỳ thư trả lời trái phép nào
đang quay trở lại từ phía máy chủ.
Vì vậy, nếu máy chủ trả lời với một 401 thư trả lời trái phép.
Vì vậy, tại thời điểm đó một lần nữa, cùng một điều,
tôi đã thiết lập AuthService ở đây,
và sau đó, bên trong đây sau đó tôi sẽ nói,
làm xử lý nếu lỗi.
Vì vậy, đây là nơi tôi sẽ nhận được giữ của HttpEvent ở đây.
HttpEvent là một đối tượng cấp thấp hơn so với một yêu cầu,
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,
và sau đó chúng tôi sẽ kiểm tra xem nếu có một lỗi,
và sau đó nếu lỗi là một thể hiện của phản hồi lỗi HTTP,
và nếu tình trạng lỗi là 401.
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.
Vì vậy, điều đó có nghĩa là có một số vấn đề ủy quyền ở phía máy chủ.
Sau đó, tại thời điểm đó tôi sẽ
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ệ.
Nếu nó không hợp lệ,
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ả.
Vì vậy, theo cách đó tôi sẽ đảm bảo rằng nếu mã thông báo web json
của tôi hết hạn trong quá trình cố gắng lấy dữ liệu,
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,
tôi sẽ chặn đó và sau đó xóa
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.
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,
nhưng với ứng dụng Angular nó phức tạp hơn một chút
để 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 đó.
Thay vào đó, tôi chỉ đơn giản là đăng xuất
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,
để người dùng sẽ được dự kiến đăng nhập vào thời điểm đó.
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,
và cũng chặn bất kỳ 401
tin nhắn trái phép đang trở lại từ phía máy chủ.
Vì vậy, bạn thấy làm thế nào những thay đổi bổ sung cần phải được
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.
Với phần xác thực thiết lập trong,
nếu bạn không có xác thực và nếu bạn chỉ đi để
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,
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.
Không yêu cầu xác thực.
Dữ liệu có thể được lấy rất dễ dàng.
Nhưng đối với bất kỳ bài đăng nào,
đặt và xóa các hoạt động,
chúng ta cần hỗ trợ tất cả các tính năng này.
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.
Cũng như tôi đã minh họa trước đó,
khi không có người dùng được đăng nhập,
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,
nhưng khi người dùng được đăng nhập,
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ể.
Điều này được thực hiện bằng cách sử dụng bảo vệ tuyến đường trong Angular.
Bây giờ để thực hiện các bảo vệ tuyến đường,
tôi đã thực hiện một dịch vụ khác ở đây được gọi là AuthGuardService.
Vì vậy, trong AuthGuardService này,
chúng tôi thực hiện phương pháp này gọi là CanActivate method mà
chúng tôi sẽ phân lớp con để thực hiện điều này.
Và trong phương pháp CanActivate,
việc thực hiện sẽ trả về một boolean,
và trong trường hợp này,
những gì chúng tôi kiểm tra là nếu người dùng này được đăng nhập,
sau đó chúng tôi sẽ cho phép người dùng điều hướng.
Nếu không, bạn sẽ điều hướng người dùng đến điểm cuối nhà.
Vì vậy, đó là cách bảo vệ tuyến đường được thực hiện trong trường hợp này.
Bây giờ, để sử dụng bảo vệ tuyến đường này,
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.
Vì vậy, trong các định tuyến tập tin,
bạn có thể thấy rằng đối với các thành phần yêu thích,
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ư
FavoritesComponent và sau đó chúng ta chỉ định lĩnh vực này khác
được gọi là CanActivate mà chúng ta chỉ định AuthGuard là tham số ở đây,
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,
được nhập khẩu ở đây.
Vì vậy, theo cách này khi AuthGuard đánh giá là sai,
sau đó bạn sẽ không được phép điều hướng đến thành phần yêu thích
, thay vào đó, bạn sẽ được chuyển hướng đến nhà,
nhưng khi người dùng được đăng nhập sau đó rõ ràng AuthGuard sẽ đánh giá đúng,
và trong trường hợp này,
sau đó bạn sẽ có thể để điều hướng đến tuyến đường ưa thích ở đó.
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
đó, cho phép bạn để đối phó với
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.
Đặc biệt, lưu ý làm thế nào các thành phần tiêu đề đã được cập nhật để
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.
Đó là một thay đổi thú vị khác mà tôi đã
thực hiện cho các thành phần tiêu đề trong ứng dụng của chúng tôi.
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.
Mã rất đơn giản ở đó.
Sẽ dễ dàng cho anh để tìm ra điều đó.
Vì vậy, với tất cả những thay đổi này, bây giờ,
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.
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ủ,
và sau đó xem nhận xét ngay lập tức phản ánh vào món ăn.
Vì vậy, một lần nữa quay trở lại ứng dụng của chúng
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,
và tôi có thể gửi ý kiến cho món ăn ở đây,
vì vậy tôi sẽ ngay lập tức thiết lập đánh giá ở đây,
và giá trị bình luận của tôi ở đây.
Chú ý rằng tôi không nhập tên
người dùng hoặc tên tác giả của tôi ở đây trong biểu mẫu ở đây.
Bây giờ tất nhiên, để gửi bình luận,
bạn cần phải đăng nhập.
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.
Vì vậy, hãy để tôi đăng nhập vào bản thân mình trước tiên.
Vì vậy, tôi có thể đăng nhập ở đây.
Và thời điểm tôi đăng nhập,
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.
Bây giờ tôi có thể đăng bình luận này.
Và bạn sẽ nhận thấy rằng khi tôi đăng bình luận,
nhận xét được thêm vào danh sách các nhận xét,
và cũng nhận thấy rằng trường tác giả được tự động điền vào đây.
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.
Trong trường nhận xét,
chúng tôi đã thiết lập người dùng của chúng tôi như
là một tham chiếu đến thông tin người dùng
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
cư trú, Mongoose Populate ở phía máy chủ, thông tin người dùng được tự động
chuyển vào các nhận xét đến từ máy chủ bên.
Vì vậy, đó là cách bạn nhận thấy làm thế nào tôi đang tận dụng
những gì máy chủ đã cung cấp cho tôi để tự động điền vào các chi tiết.
Vì vậy, những thay đổi nhỏ một lần nữa ngay cả
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ủ.
Với điều này tôi hoàn thành minh họa nhanh chóng
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.
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,
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
làm thế nào các sửa đổi cho phép chúng tôi thực hiện
trong một sửa đổi góc khách hàng mà bây giờ
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
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ủ.