Cách thay đổi nút đăng nhập thành đăng xuất trong JavaScript
|
Tìm hiểu cách tạo menu điều hướng đáp ứng với biểu mẫu đăng nhập bên trong menu Tự mình thử » Cách thêm biểu mẫu đăng nhập trong thanh điều hướngBước 1) Thêm HTMLVí dụ
Bước 2) Thêm CSSVí dụ* {kích thước hộp. hộp viền;} /* Tạo kiểu cho thanh điều hướng */ /* Liên kết thanh điều hướng */ /* Liên kết thanh điều hướng khi di chuột qua */ /* Liên kết đang hoạt động/hiện tại */ /* Định kiểu vùng chứa đầu vào */ /* Định kiểu trường nhập bên trong thanh điều hướng */ /* Tạo kiểu cho nút bên trong vùng chứa đầu vào */ .topnav .login-container button:hover { /* Thêm khả năng phản hồi - Trên màn hình nhỏ, hãy hiển thị thanh điều hướng theo chiều dọc thay vì theo chiều ngang */ Trong phần trước của chúng tôi, chúng tôi đã cải thiện thành công tiêu đề giao diện người dùng và thông báo giao diện người dùng. Trong phần này, chúng ta sẽ tìm hiểu cách kết nối nút đăng xuất và cách chuyển hướng người dùng đến MEAN Stack. Chúng tôi sẽ tìm hiểu cả hai điều từng bước và trước tiên chúng tôi tìm hiểu cách kết nối nút đăng xuất với ứng dụng. Chúng tôi sẽ sử dụng các bước sau để làm điều này 1) Chúng tôi sẽ quay lại thành phần của chúng tôi. ts và thêm trình nghe nhấp chuột vào nút đăng xuất. Chúng tôi sẽ thực thi phương thức onLogout() khi nhấp vào nút 2) Bây giờ, chúng ta cần thêm phương thức này vào thành phần. tập tin ts. Phương pháp này sẽ xóa mã thông báo và thông báo cho tất cả các phần quan tâm trên trang về trạng thái xác thực đã thay đổi 3) Chúng tôi cần chỉnh sửa lại dịch vụ xác thực và ở đó chúng tôi cần một phương thức mới, tôi. e. , đăng xuất. Trong phương pháp này, chúng tôi muốn làm hai điều chính, tôi. e. , chúng tôi sẽ đặt mã thông báo thành null để xóa mã thông báo và đặt isAuthenticated thành false 4) Bây giờ, chúng tôi cần chuyển thông tin đó cho bất kỳ ai quan tâm. Vì vậy, chúng tôi sẽ sử dụng chủ đề authStatusListener của mình và đẩy một giá trị mới, giá trị này là sai vì người dùng hiện không được xác thực nữa 5) Phương thức đăng xuất đó nên được gọi từ bên trong phương thức onLogout() trong thành phần tiêu đề. Vì vậy, ở đó chúng tôi sẽ truy cập dịch vụ xác thực của mình và sau đó gọi phương thức đăng xuất () Chúng tôi sẽ lưu tất cả các tệp và chuyển đến ứng dụng góc cạnh của chúng tôi Mọi thứ đang hoạt động tốt và bây giờ chúng ta sẽ tìm hiểu cách chúng ta sẽ chuyển hướng người dùng. Chúng tôi sẽ sử dụng các bước sau để chuyển hướng người dùng Chúng tôi sẽ triển khai logic chuyển hướng trong dịch vụ xác thực của mình và dịch vụ xác thực là một nơi tuyệt vời để thực hiện mọi việc vì ở đó chúng tôi thực hiện cả đăng nhập và đăng xuất 1) Vì vậy, để chuyển hướng người dùng, chúng tôi sẽ phải thêm @angular/router. Chúng tôi sẽ thêm một đối số mới vào hàm tạo, thuộc loại bộ định tuyến. Bộ định tuyến là một đối tượng hoặc một lớp được nhập từ @angular/router 2) Bây giờ, chúng ta sẽ sử dụng nó trong phương thức login(). Trong phương thức đăng ký, khi chúng tôi biết rằng chúng tôi có mã thông báo hợp lệ, ở cuối, chúng tôi sẽ liên hệ với bộ định tuyến của mình và gọi phương thức navigation(). Chúng tôi muốn điều hướng đến trang chủ, vì vậy chúng tôi sẽ chuyển dấu gạch chéo (/) cho chức năng đó Chúng tôi cũng muốn điều hướng đến đó nếu chúng tôi đăng xuất. Ở đó, khi chúng tôi xóa mọi thứ, chúng tôi muốn rời khỏi trang mà chúng tôi đang ở và quay lại trang chủ Bây giờ, chúng tôi sẽ kiểm tra xem chúng tôi sẽ chuyển hướng đến trang chủ sau khi đăng nhập hoặc đăng xuất 3) Chuyển hướng đến trang chủ đang hoạt động tốt. Chúng tôi có thể nhận thấy rằng chúng tôi phải đợi một khoảng thời gian rất ngắn nếu chúng tôi nhấp vào đăng nhập. Thời gian cần thiết để chúng tôi gửi yêu cầu đó và xác thực người dùng trên máy chủ. Sẽ thật tuyệt nếu trưng bày một con quay ở đó. Đó chỉ là một điều nhỏ, nhưng chúng tôi muốn thêm các công cụ quay vòng như vậy vào các thành phần đăng nhập và đăng ký. Chúng tôi đã có thành phần spinner trong ứng dụng để thêm mat-spinner bên dưới nút trong thành phần đăng ký và đăng nhập. Để làm được điều đó, chúng tôi cần biết liệu chúng tôi có đang tải hay không. Chúng ta đã đến phần Đang tải thuộc tính ở cả hai thành phần và chúng ta chỉ cần đặt nó khi đang tải Vì vậy, trong phương thức onSignup(), chúng ta sẽ đặt Loading thành true và tương tự trong phương thức onLogin() Đăng nhập Đăng ký 4) Bây giờ, trong các mẫu, chúng tôi sẽ sử dụng nó. Chúng tôi muốn ẩn nút đó nếu chúng tôi đang tải và đồng thời, chúng tôi muốn quay chúng Chúng tôi sẽ triển khai logic tương tự cho thành phần đăng ký của chúng tôi Ghi chú. Chúng tôi đã triển khai theở trên cùng, vì vậy chúng tôi khuyên bạn nên xóa cái mà chúng tôi đã triển khai bên dưới nút trong các mẫu thành phần đăng nhập và đăng kýBây giờ, chúng tôi sẽ quay lại ứng dụng góc cạnh của mình và thử đăng nhập hoặc đăng ký để kiểm tra xem công cụ quay vòng của chúng tôi có hoạt động tốt hay không Mọi thứ đang hoạt động tốt. Việc tiếp theo là bảo vệ các tuyến vì chúng ta có thể truy cập trang bài viết mới bằng cách truy cập URL đó. Chúng tôi sẽ làm điều đó sau trong phần tiếp theo |
