Bây giờ, chúng tôi đã hoàn thành việc cập nhật phía máy chủ.
Đó là thời gian để chuyển sang khách hàng phản ứng.
Để thuận tiện cho bạn, tôi đã cung cấp cho bạn kho lưu trữ GitHub,
chứa phiên bản cuối cùng của khách hàng có thể giao tiếp với
máy chủ REST API 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 ứng dụng lại mà chúng tôi đã phát triển
trong quá trình thứ hai của chuyên môn hóa 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ã 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 của bạn và sau đó nhìn thấy nó giao tiếp với bộ 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, đ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-React.git, và sau đó để cho
ứng dụng React được nhân bản vào máy tính của bạn.
Khi quá trình nhân bản hoàn tất, hãy
chuyển đến thư mục Confusion-React
vừa được tạo ra khi bạn nhân bản kho lưu trữ 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õ cài đặt sợi,
để cài đặt tất cả các mô-đun nút
mà ứng dụng React này phụ thuộc vào.
Vì vậy, một khi các mô-đun nút được cài đặt tất cả,
sau đó chúng ta có thể khởi động sợi của chúng tôi bắt đầu biên dịch và phục vụ ứng dụng React của chúng tôi.
Một khi tất cả mọi thứ đã ở trong,
đảm bảo rằng máy chủ MongoDB của bạn
đang hoạt động và cũng là máy chủ REST API của bạn cũng đang hoạt động và chạy.
Nếu không, khách hàng sẽ không hoạt động.
Vì vậy, bây giờ mà bạn đã cài đặt khách hàng của bạn trên máy tính của bạn,
thêm bắt đầu loại sợi nhắc
và ứng dụng của bạn sẽ được biên dịch lại và phục vụ trong một thời gian ngắn.
Một khi ứng dụng của bạn được biên dịch thành công,
đi vào trình duyệt và bạn sẽ thấy rằng
ứng dụng React của bạn được khởi động và hiển thị trên màn hình ở đây.
Bạn sẽ nhận thấy ngay lập tức rằng ứng dụng 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 của bạn giống như những gì bạn
đã làm ở cuối khóa học React của bạn.
Khi bạn đi đến thư mục Giới thiệu,
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 trước đó trong menu,
bạn sẽ 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.
Bây giờ, ngoài ra, tôi đã thêm vào
một trang nữa vào ứng dụng đơn trang được 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 của họ.
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 là mục yêu thích nên được hiển thị ở đây và trang liên hệ như bình thường.
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ỉ ra ở đâ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 ta có thể dễ dàng hiển thị thông tin người dùng ở đây.
Vì vậy, điều này yêu cầu sửa đổi nhỏ để 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.
Vì vậy, một khi người dùng đăng nhập,
sau đó nếu bây giờ bạn nhấp vào My Favorites, bạn sẽ
nhận thấy rằng không có gì trong My Favorites cho người dùng.
Rõ ràng là 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 đi đến menu.
Sau đó, trong menu,
hãy để tôi chọn một mục và sau đó chúng tôi 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 sẽ 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 mục yêu thích.
Thực tế là điều này đã được thêm vào mục yêu thích,
đượ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à nó chưa nằm trong số chúng tôi yêu thích.
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 mục yêu thích của tôi,
bạn sẽ thấy một tập hợp các mục yêu thích của tôi được hiển thị ở đây.
Vì vậy, bạn thấy rằng tôi chỉ thêm ba món ăn này vào
mục yêu thích của tôi và vì vậy chúng đang được trưng bày ở đâ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ủ nào được 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, 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 lập tức
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 thấy giá trị kết quả được hiển thị ở đâ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 khách hàng để 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.
Bây giờ, vì vậy, với điều này bạn nhận thấy
làm thế nào khách hàng 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 ở phía máy chủ và
sau đó tự động được phản ánh vào ứng dụng My Client như được hiển thị ở đây.
Bây giờ, bạn đã thấy ứng dụng React sửa đổi trong hành động,
đó là thời gian để truy cập vào mã nguồn để xem
nó được thực hiện chính xác như thế nào và những thay đổi
mà chúng tôi đã thực hiện tương ứng với ứng dụng Redux ở cuối khóa học Redux.
Bây giờ, hai thay đổi lớn mà bạn sẽ nhận thấy,
là sự hỗ trợ cho mục yêu thích và cũng hỗ trợ xác thực,
người dùng đăng nhập và đăng xuất hỗ trợ.
Bây giờ, những điều này được thực hiện như thế nào?
Chúng tôi sẽ bắt đầu cuộc hành trình của chúng tôi trong phần Redux của ứng dụng của chúng tôi.
Vì vậy, đi vào phần Redux,
chúng ta hãy truy cập các loại hành động.
Trong các loại hành động, bạn sẽ thấy bây giờ rằng chúng ta có
ba loại hành động mới liên quan đến mục yêu thích của chúng.
Vì vậy, bạn sẽ thấy mục yêu thích tải,
mục yêu thích không thành công, và thêm mục yêu thích
, như bạn mong đợi sẽ có mặt ở đó.
Sau đó, cũng có sáu loại hành động khác nhau liên quan đến quá trình đăng nhập và đăng xuất của họ.
Bây giờ, vì vậy bạn có thể thấy yêu cầu đăng nhập, đăng nhập thành công,
thất bại đăng nhập, yêu cầu đăng xuất,
đăng xuất thành công và thất bại.
Vì vậy, chúng ta sẽ thấy cách các loại hành động này thực sự được sử dụng trong hành động của chúng tôi tạo ra.
Vì vậy, đi vào những người sáng tạo hành động,
vì vậy đây là nơi bạn sẽ thấy sự hỗ trợ cho các mục yêu thích ở đây.
Vì vậy, trước tiên chúng tôi sẽ kiểm tra sự hỗ trợ cho mục yêu thích và sau đó chúng tôi sẽ
kiểm tra sự hỗ trợ cho sự hỗ trợ xác thực.
Vì vậy, trong đây, bạn sẽ thấy rằng chúng tôi có phương pháp mới xuống dưới
đây gọi là FavoriteSloading, FavoritesFailed, và AddFavorites.
Bây giờ, từ kinh nghiệm trước đây của bạ
nTải và DishesFailed và AddDishes và vân vân.
Vì vậy, những điều này rất quen thuộc với bạn,
do đó nó chính xác cùng một loại thiết lập cho mã ở đây.
Ngoài ra, bạn sẽ thấy một phương pháp khác ở đây gọi
là FetchFavorites, một lần nữa như tôi đã nói một xe tăng Redux,
được thực hiện ở đây,
nơi chúng tôi sẽ sử dụng lấy để truy cập vào máy chủ để lấy các mục yêu thích.
Vì vậy, đây là những phương pháp mà bạn sẽ thấy ở đây và sau đó bạn cũng sẽ thấy D
eleteFavorite ở đây và cũng là một xe tăng Redux cho PostFavorite ở đây.
Vì vậy, trong PostFavorite như bạn mong đợi,
bạn sẽ được đăng yêu thích lên máy chủ ở đây.
Vì vậy, ở đây chú ý cách chúng tôi đang sử dụng ủy quyền.
Được thiết lập trong tiêu đề ủy quyền của chúng tôi vì vậy,
đây là một cái gì đó mà tôi sẽ thu hút sự chú ý của bạn vào thời điểm này,
chúng tôi sẽ trở lại điều này một lần nữa khi chúng tôi nhìn vào xác thực người dùng và ủy quyền.
Vì vậy, chúng tôi đang thiết lập các tiêu đề ủy quyền như thế này bằng cách sử dụng lấy ở đây.
Vì vậy, để lấy, chúng tôi đang đăng một mục vào lấy
ở đây và sau đó bạn sẽ nhận thấy rằng cấu trúc của cách lấy được thực hiện được đưa ra ở đây.
Bây giờ bất cứ khi nào bạn đăng một yêu thích hoặc xóa một yêu thích hoặc lấy một yêu thích,
chúng tôi sẽ luôn luôn có máy chủ trả lại cho bạn,
toàn bộ các yêu thích và sau đó chúng tôi sẽ chỉ đơn giản thêm những yêu thích
vào cửa hàng redux của chúng tôi ở đây để đó là những gì chúng tôi đang làm ở đây.
Một lần nữa, cấu trúc mã sẽ trông rất quen thuộc với bạn,
nếu bạn chỉ cần nhìn vào cách yêu thích bài đăng
, yêu thích xóa và yêu thích lấy được thực hiện.
Vì vậy, tất cả những điều này sẽ xử lý vấn đề yêu thích.
Bây giờ, chính xác là các mục yêu thích chính nó được thực hiện như thế nào?
Vì vậy, chức năng giảm tốc được thực hiện trong cấu trúc yêu thích ở đây.
Vì vậy, bên trong chức năng giảm này,
bạn sẽ thấy làm thế nào chúng ta xử lý thêm yêu thích,
yêu thích tải, và yêu thích thất bại ở đây.
Một lần nữa mã sẽ trông rất quen thuộc với bạn dựa trên
kinh nghiệm của bạn với các chức năng giảm tốc mà bạn đã nhìn thấy cho redux trước đây.
Vì vậy, một lần nữa trả một chút chú ý đến cách mã được thực hiện.
Điều này là khá đơn giản vì vậy tôi không dành
quá nhiều thời gian giải thích làm thế nào những điều này được thực hiện.
Bây giờ, tận dụng những điều này,
chúng tôi có trong các thành phần chúng tôi bây giờ có
một thành phần yêu thích mới mà công việc đó là để hiển thị tất cả các danh sách yêu thích của chúng tôi.
Vì vậy, ở đây bạn thấy rằng các thành phần yêu thích chính nó,
cấu trúc của các thành phần yêu thích là rất nhiều tương tự như
cấu trúc của các thành phần trình đơn vì vậy ở đây chúng tôi có
thành phần yêu thích được thực hiện như một thành phần chức năng và trong
đó chúng tôi đang render các mục yêu thích trong ở đây như bạn thấy trong mã ở đây.
Một lần nữa, rất đơn giản tôi nghĩ rằng bạn sẽ có thể dễ
dàng hiểu làm thế nào các thành phần yêu thích được
thực hiện có kinh nghiệm với cách các thành phần menu được thực hiện ở đó.
Vì vậy, một lần nữa tôi không dành quá nhiều thời gian giải thích mã ở đây.
Bây giờ phân tích cú pháp thông qua mã cũng là
một trải nghiệm tốt để bạn tìm hiểu làm thế nào các mã được thực hiện để
xử lý mã này trong đầu của riêng bạn sẽ giúp bạn hiểu một lần nữa
để củng cố sự hiểu biết của bạn về phản ứng một cách chi tiết hơn.
Vì vậy, tôi sẽ để nó như một bài tập cho các bạn.
Bây giờ tôi chỉ ra nơi những thay đổi đã được
thực hiện để thực hiện hỗ trợ cho mục yêu thích.
Bây giờ các thuật ngữ yêu
thích, yêu thích cũng là đòn bẩy trong
các thành phần chi tiết món ăn và bên trong các thành phần chi tiết món ăn,
bạn sẽ thấy rằng chúng ta có thêm-
Trong đây, trong các thành phần chức năng
render món ăn, chúng tôi sẽ vẽ các nút hỗ trợ
lựa chọn hoặc khi bạn bấm vào phác thảo trái tim,
nó sẽ thêm rằng mục cụ thể vào danh sách yêu thích của bạn.
Vì vậy, tất cả điều này được hỗ trợ ở đây bằng cách sử dụng nút này ở đây mà
invokes như bạn thấy chức năng này được gọi là bài yêu thích đó là redux.
Cảm ơn rằng chúng tôi đã thực hiện ở đó và hỗ trợ này cho điều này
được thực hiện trong các thành phần chính, vì vậy khi bạn đi vào các thành phần chính,
bạn sẽ thấy như thế nào các bài yêu thích được thực hiện ở đây
và bạn cũng sẽ thấy rằng điều này được
bao gồm trong bản đồ gửi đến đạo cụ và do đó các bài đăng yêu thích thực hiện.
Vì vậy, bạn thấy cấu trúc là rất nhiều
giống như những gì bạn đã nhìn thấy cho các mã khác có.
Vì vậy, tôi sẽ không dành quá nhiều thời gian vào cách hỗ trợ yêu thích được thực hiện,
thay vào đó hãy để tôi dành nhiều thời gian hơn về cách
người dùng ủy quyền và xác thực được hỗ trợ trong mã ở đây.
Bây giờ để xác thực người dùng,
những gì chúng tôi đang làm ở đây là khi bạn đi vào cửa hàng cấu hình ở đây,
bạn sẽ thấy rằng tôi có thêm một chức năng giảm được gọi là Auth được thực hiện ở đây.
Vì vậy, điều đó sẽ theo dõi phần ủy quyền của nó.
Bây giờ điều này được thực hiện như thế nào?
Một lần nữa, đi vào người sáng tạo hành
động, các loại không hành động chúng tôi đã thấy các tập hợp các hành động liên quan đến đăng nhập và đăng xuất.
Vì vậy, đi vào người sáng tạo hành động,
bạn sẽ thấy rằng ở đây chúng tôi có
tất cả các chức năng được thực hiện để đăng nhập và đăng xuất.
Vì vậy, bạn sẽ thấy một chức năng mới gọi là đăng nhập yêu cầu, nhận đăng nhập,
và vì vậy đây là khi đăng nhập thành công và như vậy nhưng đặc biệt,
chức năng đặc biệt này ở đây của người dùng đăng nhập là nơi chúng tôi bắt đầu với quá trình đăng nhập.
Vì vậy, chúng tôi sẽ gửi yêu cầu đăng nhập tại thời điểm khi người dùng cố gắng đăng nhập,
sau đó chúng tôi sẽ làm một lấy cho người dùng slash điểm cuối đăng nhập với
bài đăng và điều này chứa trong nội dung của thông điệp các thông tin đăng nhập cho người dùng ở đây.
Vì vậy, một khi chúng ta thực hiện việc lấy,
nếu phản ứng được trả lại chính xác,
thì phản ứng sẽ chứa mã thông báo ở đó.
Vì vậy, chúng tôi sẽ xử lý phản ứng đó xuống đây và sau đó vì vậy nếu đăng nhập thành công,
sau đó chúng tôi sẽ lưu trữ mã thông báo vào lưu trữ cục bộ ở đây.
Vì vậy, bạn có thể thấy rằng chúng ta đang nói LocalStorage thiết lập
mã thông báo phản hồi mục và sau đó chúng tôi
cũng sẽ lưu trữ thông tin đăng nhập của người dùng trong lưu trữ cục bộ ở đây.
Vì vậy, hai điều này sẽ giúp tôi theo dõi quá trình đăng nhập của người dùng.
Sau đó, chúng tôi sẽ gửi thông tin đăng nhập nhận.
Bây giờ tại thời điểm này khi người dùng đăng nhập thành công,
chúng tôi cũng sẽ lấy các mục yêu thích cho người dùng.
Bây giờ hãy nhớ rằng bạn chỉ có thể lấy các mục yêu thích cho người dùng đã đăng nhập.
Khi không có người dùng đăng nhập không có mục yêu thích nào được lấy,
nhưng khi người dùng đăng nhập thành công bạn muốn lấy
yêu thích của người dùng để anh ta có thể hiển thị điều đó trong ứng dụng phản ứng của bạn.
Vì vậy, đó là lý do tại sao tôi cũng đang làm một yêu thích lấy
ở đây và sau đó chúng tôi sẽ nhận được đăng nhập ở đây.
Sau đó, nếu có lỗi, chúng tôi sẽ gửi lỗi đăng nhập ở đây.
Vì vậy, tất cả các chức năng nhận được đăng nhập và đăng nhập lỗi
sau đó sẽ gọi các chức năng Reducer thích hợp được thực hiện trong các tập tin Auth.Js.
Vì vậy, đi vào tập tin Auth.Js,
trạng thái ở đây theo dõi tình trạng đăng nhập của người dùng ở đây.
Vì vậy, ở đây chúng tôi cũng sẽ lưu trữ trong tiểu
bang, nhà nước liên quan đến Đông tải Boolean
theo dõi cho dù bạn đang ở trong quá trình đăng nhập. Dễ dàng xác thực-
Sẽ cho biết liệu người dùng được xác thực và do đó người dùng được đăng nhập,
vì vậy bạn sẽ có thể cho phép người dùng.
Vì vậy, lá cờ này được sử dụng trong nhiều trường hợp
để hiển thị trạng thái đăng nhập của người dùng và sau đó cũng là
thuộc tính người dùng cho nhà nước theo dõi thông tin đăng nhập của người dùng.
Vì vậy, đó là nơi chúng tôi sẽ nhận được tên người dùng để hiển thị trong thành phần tiêu đề của chúng tôi.
Bây giờ, ở đây bạn sẽ thấy yêu cầu đăng nhập và khi thành công đăng nhập được kích hoạt,
sau đó bạn sẽ lưu trữ giá trị mã thông báo ở đây và sau đó là lỗi đăng nhập.
Yêu cầu đăng xuất, đăng xuất thành công,
tất cả những điều này được xử lý bởi các bộ phận khác nhau bên trong bộ giảm tốc này auth.js ở đây.
Vì vậy, đó là cách xác thực của người dùng được xử lý ở đây.
Bây giờ, trong thành phần tiêu đề,
đi vào thành phần tiêu đề,
vì vậy đây là nơi chúng tôi có chức năng đăng nhập ở đây.
Vì vậy, HandleLogin, bạn nhớ rằng chúng tôi
đã thực hiện điều này trong quá trình phản ứng.
Trong HandleLogin, họ sẽ chuyển đổi phương thức.
Vì vậy, chúng tôi sẽ đóng phương thức và sau đó chúng tôi sẽ đăng nhập vào người dùng tại thời điểm này.
Vì vậy, chúng ta sẽ nói này.props LoginUser và sau đó bạn sẽ thấy rằng các thông tin đăng nhập,
tên người dùng và mật khẩu được thông qua như là
các tham số để LoginUser và do đó được vào func LoginUser,
mà sau đó sẽ chăm sóc đăng nhập vào người dùng.
Bây giờ, làm thế nào để bạn hiển thị trạng thái đăng nhập của người dùng.
Vì vậy, điều đó rất đơn giản một lần nữa.
Trong navbar ở đây,
bạn sẽ thấy rằng tôi đã thêm vào một mục mới ở đây.
Vì vậy, đây là nơi chúng ta sẽ nói này.props.auth.isAuthenticcated.
Vì vậy, cờ IsAuthenticated đang được sử dụng ở đây bởi tôi và vì vậy nếu điều này được thiết lập thành true,
sau đó tôi sẽ hiển
thị nút Đăng xuất ở đây và vì vậy đó là điều mà tôi sẽ hiển thị ở đây.
Nếu không, tôi sẽ hiển thị nút đăng nhập.
Vì vậy, bằng cách sử dụng lá cờ IsAuthenticated,
tôi lật nút cụ thể nào sẽ được hiển thị
trong tiêu đề có cho dù bạn hiển thị nút đăng xuất hoặc nút đăng nhập.
Vì vậy, đó là điểm mà chúng tôi đang hiển thị ở đây.
Vì vậy, đăng nhập hoặc đăng xuất ở đây.
Vì vậy, đó là cách chúng tôi đang xử lý quá trình đăng nhập và đăng xuất ở
đây và chúng tôi cũng sẽ hiển thị tên người dùng ngay tại đó.
Vì vậy, khi bạn hiển thị nút đăng xuất,
bạn cũng sẽ thấy rằng chúng tôi đang hiển thị tên của người dùng trong đó.
Vì vậy, xuống dưới đây,
chúng tôi cũng sẽ hiển thị nút HandleLogout và
sau đó chúng tôi có nút đăng xuất được hiển thị ở đây.
Ngoài ra, tuyên bố đặc biệt này ở đây,
đây là cách chúng tôi đang hiển thị tên người dùng ở đây.
Vì vậy, điều này sử dụng tên người dùng này.props.auth.user.username.
Vì vậy, tài sản người dùng trong trạng thái auth chứa
thông tin đăng nhập người dùng và từ đó tôi lấy tên người dùng và sau đó tôi
sử dụng nó để hiển thị điều này trong thanh tiêu đề.
Vì vậy, đó là cách các thành phần tiêu đề được
cập nhật để xử lý quá trình đăng nhập và đăng xuất.
Một lần nữa, cách thực hiện khá đơn giản,
đó là cách khá đơn giản mà tôi đã thực hiện ở đây.
Bây giờ rõ ràng, nếu bạn muốn có một cách phức tạp hơn để xử lý quá trình đăng nhập và đăng xuất,
chắc chắn bạn có thể đi vào cách làm đầy đủ,
nhưng điều này là đủ để đáp ứng các yêu cầu cho ứng dụng của tôi.
Vì vậy, tôi đã thực hiện quá trình đăng nhập và đăng xuất
một cách rất đơn giản ở đây bằng cách sử dụng sự trợ giúp của cửa hàng Redux.
Vì vậy, bởi Redux cửa hàng chính nó là theo dõi
tình trạng đăng nhập của tôi cho dù tôi đã đăng nhập và tôi được xác thực và cho dù tôi đã đăng xuất.
Vì vậy, nếu người dùng được đăng xuất,
thì mục Yêu thích của tôi không được hiển thị ở đây.
Bây giờ, một điểm quan trọng mà bạn sẽ hỏi là,
làm thế nào để chúng ta đảm bảo rằng chúng ta không đi vào trạng thái yêu thích ở đây?
Vì vậy, điều này được xử lý ở nơi mà chúng tôi xử lý các tuyến đường ở đây.
Vì vậy, bạn sẽ nhận thấy rằng đối với các mục yêu thích ở đây,
chúng tôi tuyên bố cho các mục yêu thích điểm cuối thay vì
gọi đây là tuyến đường chúng tôi gọi nó là một tuyến đường riêng tư.
Vì vậy, tuyến đường riêng tư cho phép bạn đảm bảo rằng bạn sẽ được
phép đi vào phần đó chỉ trong trường hợp,
nơi người dùng được đăng nhập.
Vì vậy, điều này sẽ ngăn chặn một điều hướng đến điểm cuối /yêu thích của họ nếu không có người dùng được đăng nhập.
Bây giờ, tuyến đường riêng này được thực hiện như thế nào?
Tuyến đường riêng này được thực hiện ngay trên này.
Vì vậy, bạn có thể thấy rằng tuyến đường riêng tư này được thực hiện như thể hiện ở đây.
Vì vậy, đây là không có gì ngoài một tuyến đường ở đây và sau đó ở đây,
chúng tôi sẽ thực hiện này.props.auth.isAuthenticated.
Vì vậy, nếu người dùng được xác thực,
sau đó tôi sẽ cho phép điều hướng đến
thành phần đó là thành phần yêu thích.
Nếu không, tôi sẽ chỉ đơn giản là chuyển hướng đến thành phần nhà.
Vì vậy, nếu không có người dùng đăng nhập,
tôi sẽ chỉ đơn giản là chuyển hướng đến thành phần nhà và do đó điều này được
thực hiện bằng cách sử dụng tuyến đường riêng tư này mà tôi đã thiết kế ở đây.
Vì vậy, tuyến đường riêng tư là một cái gì đó được hỗ trợ bởi bộ định tuyến
mà chúng tôi sử dụng bộ định tuyến React Dom mà chúng tôi đã sử dụng trong ứng dụng React của chúng tôi.
Vì vậy, rất đơn giản cách xử lý các tình huống,
nơi bạn không muốn một số tuyến đường được điều hướng đến khi người dùng không đăng nhập.
Vì vậy, một lần nữa, vài thay đổi đơn giản mà tôi đã thực hiện cho
các ứng dụng để tạo điều kiện cho
tất cả các tính năng khác nhau mà bạn nhìn thấy trong ứng dụng React của bạn.
Bây giờ, như bạn mong đợi,
bạn có thể được underwhelmed tại thời điểm này,
“Nó có đơn giản để thực hiện” và thực sự đó là
chính xác những gì đã được thực hiện để hỗ trợ tất cả các tính năng mới.
Như bạn thấy,
quá trình xác thực người dùng và đăng nhập và đăng xuất từ máy chủ của chúng tôi đã hỗ trợ đầy đủ cho tất cả mọi thứ,
thực hiện theo dõi phía khách hàng của
quá trình đăng nhập và đăng xuất người dùng và tất cả những gì trở nên khá đơn giản bằng cách chỉ cần
sửa đổi một số thành phần và thêm
vào chức năng auth reducer và thêm vào trạng thái auth vào cửa hàng Redux của chúng tôi.
Toàn bộ quá trình xử lý xác thực người dùng
và đăng nhập và đăng xuất trở nên khá đơn giản trong trường hợp này.
Vì vậy, với tour du lịch nhanh chóng của mã React cập nhật này, chúng
ta hãy tiếp tục kiểm tra
ứng dụng React của chúng tôi một vài tính năng khác của ứng dụng React của chúng tôi.
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 nhận xét này sẽ không được chấp nhận bởi máy chủ của tôi.
Vì vậy, để tôi đăng nhập đầu 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 ý kiến,
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à vì chúng tôi sử dụng 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ừ phía máy chủ.
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 nhận xét hỗ trợ trên trang web 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 React 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 khách hàng cũng và sau đó
phản ánh lại về những gì bạn đã học được trong React khóa học 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,
[không nghe được] mà bây giờ có thể giao tiếp với 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ủ của chúng tôi.