Trong bài này, chúng ta sẽ thực hành viết ứng dụng sử dụng Guard (CanActivate) để xác thực và cấp quyền truy cập cho người dùng theo từng mức độ phân quyền.

Với trang login, ta sử dụng lại code của bài Tạo một trang Login với Angular Material như sau:

– Template (login.component.html):

– Component (login.component.ts):

Để minh họa việc cấp quyền truy cập đối với từng đối tượng người dùng, ta tạo thêm DashboardComponent với DashboardModule và hai component con gồm AboutComponent và ContactComponent. Sau khi người dùng login thành công, người dùng sẽ được chuyển hướng đến Dashboard và tùy thuộc phần quyền của người dùng, ứng dụng sẽ cho phép người dùng truy cập tính năng theo phân quyền:

– Guess: Chỉ hiển thị About mà không hiển thị Contact

– User: Hiển thị cả About và Contact nhưng không truy cập được tính năng Contact

– Admin: Hiển thị và truy cập được cả About và Contact

Ta viết template (dashboard.component.html) và component(dashboard.component.ts) của Dashboard như sau (Với template của About và Contact ta chỉ hiển thị text nhằm mục đích minh họa cho ứng dụng):

Thành phần quan trọng trong bài này là AuthService và AuthGuard. Ta tạo hai file này sử dụng dòng lệnh sau:

Với AuthService (auth.service.ts) ta thực hiện sử lý login(), logout() như sau (Trong bài này chúng ta chỉ sử dụng username và password để đơn giản hóa cho ví dụ minh họa. Trong bài tiếp theo chúng ta sẽ sử dụng JWT token để phù hợp với thực tế sử dụng):

Ở hàm login(), chúng ta có điều hướng đến trang Dashboard. Tuy nhiên, việc điều hướng này sẽ quyết định và xử lý bởi AuthGuard (auth.guard.ts)như sau:

Trong AuthGuard, chúng ta viết hàm canActivate() để quyết định xem việc điều hướng (routing) có được kích hoạt hay không. Hàm này sẽ trả về giá trị True (kích hoạt) hoặc False (không kích hoạt). Logic của hàm canActivate() trong bài này như sau:

– Nếu người dùng đăng nhập không đúng username và password, chuyển người dùng về trang login và trả kết quả là False (không kích hoạt path người dùng muốn truy cập)

– Nếu người dùng được xác thực nhưng không có quyền truy cập vào chức năng thì sẽ hiện ra thông báo chức năng cần quyền quản trị và trả kết quả là False (không kích hoạt path người dùng muốn truy cập)

– Nếu người dùng có quyền Admin: trả kết quả là True (cho phép người dùng truy cập path mong muốn)

Việc quy định Role cho từng path được cấu hình trong file app-routing.module.ts như sau (tham khảo thêm cách cấu hình route tại đây):

Chúng ta khởi chạy ứng dụng với lệnh ng serve và kiểm tra việc xác thực, phân quyền cho người dùng như sau:

– Truy cập http://localhost:4200/dashboard thì sẽ được điều hướng đến trang http://localhost:4200/login do người dùng chưa tiến hành đăng nhập.

– Đăng nhập với tài khoản Guess (username: guess, password: 123) sẽ được giao diện hiển thị như sau (không có Contact):

– Đăng nhập với tài khoản User (username: user, password: 123) sẽ được giao diện hiển thị như sau (có Contact nhưng khi truy cập sẽ nhận được thông báo phải có quyền Admin):

– Đăng nhập với tài khoản Admin (username: admin, password: 123) sẽ được giao diện hiển thị như sau (có thể truy cập Contact):

Như vậy, chúng ta đã hoàn thành việc viết ứng dụng sử dụng Guard (CanActivate) để xác thực và cấp quyền truy cập cho người dùng theo từng mức độ phân quyền. Các bạn có thể tham khảo toàn bộ code của bài này trong trang Github của Itech Seeker tại đây.

Tháng Tám 27, 2021
ITechSeeker