Viết Routing trong Angluar với nhiều module và xác thực Router.

63

Từ khi framework Angular ra đời, nó được biết đến với việc tạo các Single Page App, cập nhật các URL trên thanh địa chỉ sẽ làm cho website của bạn dễ dàng sử dụng hơn. Bằng cách thêm các routes vào trong ứng dụng của bạn, người dùng có thể:

  • Refresh trang mà không làm mất dữ liệu người dùng đã nhập ở trang hiện tại của bạn.
  • Lưu dấu trang cho một tính năng hoặc một phần dữ liệu cụ thể.
  • Chia sẻ liên kết trang web của bạn với những người khác.

Và mình là Quang Minh. Hôm nay mình sẽ hướng dẫn viết routes với nhiều module như nào và xác thực bạn có quyền mới vào được các routes đó (những routing 18+ thì chỉ nên cho người trên 18 tuổi vào xem thôi nha 😀 )

Note: Bài viết được tham khảo từ tè le nguồn khác nhau, để xem chi tiết và đầy đủ nhất thì không thể bỏ qua cái trang chủ của nó do các cao nhân viết: https://angular.io

#1 Tạo module

Như bạn biết khi tạo project Angular thì mặc định ta đã có 1 app.module cái này hiểu là module lớn nhất quản lý các module khác.

Tiếp theo giờ mình tạo một module con khác đặt tên là home.module thì chúng ta có thể tạo bằng 2 cách như sau:

  • Tạo bằng tay: nghĩa là tự tạo ra folder cấu trúc giống như app.module (Rảnh rang quá thì tạo cách này cho nó giết thời gian ).
  • Tạo bằng tay kết hợp với lười: cách này ta dùng lệnh và ngồi hóng gió 5s là có cái module đúng chuẩn rồi "ng g module <Tên module mình thích >", có thể tham khảo ở đây https://angular.io/cli/generate. Mình sẽ tạo một home module "ng g module home", thành quả.

#2 Tiếp theo tạo file routing cho home module

Thì bình thường mình cũng có thể viết thẳng vào home.module cũng được, nhưng vì để những thế hệ sau có thể đọc được thì ta nên viết bằng cả cái tâm không sau này tụi nó lại chửi chúng ta :D.

Sau đó ta khai báo routing thì được kết quả như trong hình nhé, vì 1 module có thể chưa nhiều component nên khi bạn muốn routing tới nhiều component thì bỏ phía trong đó.



Rồi tiếp theo ở home.module ta import cái RoutingModule mới tạo đó vào là xong phần module con.



#3 App.module thì viết như nào?

Cũng tương tự như phần module trên mình sẽ tạo ra 1 file app-routing.module.ts cho thế hệ sau không chửi chúng ta vì đọc đách hiểu gì và cũng import RoutingModule đó vào app.module.



Giờ khi bạn chạy lên có thể truy cập vào http://localhost:4200/home/xxxxx
Bạn có thể thấy sao nó đơn gian vậy mà phải chia ra module cho nó phức tạp lằng nhằn ra, bài viết này mình muốn hướng tới là các bạn có thể mở rộng ra, bản chất một web app không thể nào chỉ có một module được và còn nhiều vấn đề khác nửa như lazy loading nửa các bài viết sau mình sẽ nói cụ thể.

Các page khác có thể chỉ bạn viết cách routing như nào trong angular nhưng không chỉ bạn chia module như nào thì hi vọng những nội dung trên có thể giúp ích (mọi người đọc có cảm động không 😀 ).

#4 Xác thực router

Sau khi ta đã hoàn thành việc routing 1 cách có tâm nhất có thể thì tiếp tục đặt ra vấn đề, có những routing mình muốn thật sự những người có quyền hạn cao mới đc phép truy cập tới để xem được nội dung hay làm gì trong đó thì tùy thì mình làm sao?
Angular đã hỗ trợ bạn 1 phương thức canActivate ( tham khảo : https://angular.io/api/router/CanActivate ).

Hiểu nôn na phương thức này là một nơi xử lý tác vụ gì đó trước khi bạn truy cập vào routing đó và giá trị trả về true, false, nếu true thì vào được còn false thì tự hiểu đi nha.

Ví dụ: khi bạn login mà muốn chỉ những người có role là vip mới vào được module hoặc là routing đó thì ta dùng canActivate làm điều này hoặc những trang 18+ mà không muốn hủy hoại những đứa trẻ thì kiểm tra tụi nó có đủ 18 tuổi chưa :D. Ta sẽ tạo 1 service implements CanActivate của Angular.



Như bạn thấy là mình return true thì có nghĩa là lúc nào mình cũng có thể vào được, phần xử lý như bạn muốn bạn có thể xử ly trong function canActivate đó và kết quả return về là kiểu bool là OK. Sau đó qua phần routing ta thêm nó vào router là nó sẽ hoạt động được.



Nếu bạn không dùng canActivate thì bất kì ai cũng có thể truy cập vào đc module home đó, nhưng khi bạn dùng cacActivate thì khi bàn truy cập vào nó sẽ phải qua bước xác thực đó.

Hi vọng mọi người góp ý kiến, nếu có sai sót gì thì mình sẽ update vì kiến thức rộng và sâu mà.

Chúc các bạn thành công!