Sự khác biệt giữa canLoad và canActivate của Angular?

Sự khác biệt giữa canLoadvà là canActivategì?

export interface Route {
  path?: string;
  pathMatch?: string;
  matcher?: UrlMatcher;
  component?: Type<any>;
  redirectTo?: string;
  outlet?: string;
  canActivate?: any[];
  canActivateChild?: any[];
  canDeactivate?: any[];
  canLoad?: any[];
  data?: Data;
  resolve?: ResolveData;
  children?: Routes;
  loadChildren?: LoadChildren;
}

Khi nào tôi nên chọn một trong số họ?

canActivate được sử dụng để ngăn người dùng trái phép truy cập các tuyến đường nhất định. Xem tài liệu để biết thêm thông tin.

canLoad được sử dụng để ngăn ứng dụng tải toàn bộ mô-đun một cách lười biếng nếu người dùng không được phép làm như vậy.

Xem tài liệu và ví dụ bên dưới để biết thêm thông tin.

{
    path: 'admin',
    loadChildren: 'app/admin/admin.module#AdminModule',
    canLoad: [AuthGuard]
},

Với mã này, mã cho AdminModule sẽ chỉ được tải vào ứng dụng nếu AuthGuard trả về true.

Nếu người dùng không được phép truy cập vào tuyến đường này và chúng tôi chỉ sử dụng một biện pháp canActivatebảo vệ, thì tuyến đường AdminModulesẽ được tải, mặc dù người dùng sẽ không thể truy cập tuyến đường đó.

• CanActivate - Quyết định xem một tuyến đường có thể được kích hoạt hay không, trình bảo vệ này có thể không phải là cách tốt nhất cho các mô-đun tính năng được tải chậm, vì trình bảo vệ này sẽ luôn tải mô-đun trong bộ nhớ, ngay cả khi trình bảo vệ trả về false nghĩa là người dùng không được phép truy cập các tuyến đường.
• CanLoad - Quyết định xem một mô-đun có thể được tải một cách lười biếng hay không, Kiểm soát nếu một tuyến đường thậm chí có thể được tải. Điều này trở nên hữu ích cho các mô-đun tính năng được tải chậm. Họ thậm chí sẽ không tải nếu bảo vệ trả về false.

Đây là bài kiểm tra tôi đã thực hiện trên cả hai bảo vệ với một mô-đun tính năng được tải chậm:

1. CanActivate Guard Test

bạn sẽ nhận thấy ở cuối trang Mạng rằng nó đã thực hiện 24 yêu cầu với kích thước 9,5 MB được chuyển hoàn tất trong 3,34 giây và tải đầy đủ trong 3,47 giây.

1. Kiểm tra CanLoad Guard

ở đây bạn sẽ thấy sự khác biệt lớn khi chúng tôi sử dụng CanLoad Guard vì trình duyệt chỉ thực hiện 18 yêu cầu với kích thước 9,2 MB được chuyển hoàn tất trong 2,64 giây và tải đầy đủ 2,59 giây.

CanLoad Guard không bao giờ tải dữ liệu mô-đun nếu người dùng không được phép và điều đó mang lại cho bạn hiệu suất cao hơn vì thời gian tải giảm gần 1 giây và đó là thời gian rất lớn khi tải trang web, không nghi ngờ gì nữa, nó phụ thuộc vào kích thước mô-đun.

Mẹo: nếu bạn muốn thực hiện thử nghiệm trên dự án của mình, hãy đảm bảo rằng Disable Cachehộp kiểm trong tab mạng được chọn, hộp kiểm đó được đánh dấu trong hình ảnh đầu tiên

Về câu hỏi từ các bình luận trong bài viết khác "Nếu tôi sử dụng canActivate trong trường hợp trên, sự khác biệt sẽ là gì?"

Trên thực tế, đối với người dùng sẽ không có sự khác biệt, anh ta sẽ không có quyền truy cập vào trang trong cả hai trường hợp. Mặc dù có một sự khác biệt tiềm ẩn . Nếu bạn nhấn F12 và di chuyển đến Nguồn (trong Chrome), nơi chứa tệp tải xuống. Sau đó, bạn có thể thấy rằng trong trường hợp tệp canActive có mã đã được tải xuống ( chunk.js ). Ngay cả khi bạn không có quyền truy cập vào trang.

Nhưng trong trường hợp với canLoad sẽ không có tệp chunk.js với mã nguồn.

Vì vậy, như bạn có thể thấy điều này có tác động thực sự lớn đến bảo mật.

Và tất nhiên đừng quên rằng canLoad chỉ có thể được sử dụng cho các Mô-đun LazyLoaded .

canActivate được sử dụng để ngăn chặn người dùng trái phép

canLoad được sử dụng để ngăn toàn bộ mô-đun của ứng dụng

Ví dụ về canActivate :

{ path: 'product',canActivate:[RouteGaurd], component : ProductComponent }

Ví dụ về canLoad :

{ path: 'user' , canLoad: [AuthenticGuard], loadChildren : './user/user.module#UserModule' }

Các CanLoad Guard ngăn chặn việc tải của Module Loaded Lazy. Chúng tôi thường sử dụng biện pháp bảo vệ này khi chúng tôi không muốn người dùng trái phép điều hướng đến bất kỳ tuyến nào của mô-đun và cũng dừng lại sau đó thậm chí xem mã nguồn của mô-đun.

Angular cung cấp canActivate Guard, ngăn người dùng trái phép truy cập vào tuyến đường. Nhưng nó không ngăn mô-đun được tải xuống. Người dùng có thể sử dụng bảng điều khiển dành cho nhà phát triển chrome để xem mã nguồn. CanLoad Guard ngăn không cho tải xuống mô-đun.

Trên thực tế, CanLoad bảo vệ một mô-đun được tải nhưng một khi mô-đun được tải thì chức năng bảo vệ CanLoad sẽ không làm gì cả. Giả sử chúng ta đã bảo vệ việc tải mô-đun bằng cách sử dụng bảo vệ CanLoad cho người dùng chưa được xác thực. Khi người dùng đăng nhập thì mô-đun đó sẽ được áp dụng để tải và chúng tôi sẽ có thể điều hướng các đường dẫn con được cấu hình bởi mô-đun đó. Nhưng khi người dùng đăng xuất, người dùng vẫn có thể điều hướng các đường dẫn con đó vì mô-đun đã được tải. Trong trường hợp này, nếu chúng tôi muốn bảo vệ đường dẫn trẻ em khỏi những người dùng trái phép, chúng tôi cũng cần sử dụng tính năng bảo vệ CanActivate .

Sử dụng CanLoad trước khi tải AdminModule:

  {
        path: 'admin',
        loadChildren: 'app/admin/admin.module#AdminModule',
        canLoad: [ AuthGuardService ]
      },

Sau khi tải AdminModule, trong mô-đun AdminRouting, chúng ta có thể sử dụng CanActive để bảo vệ trẻ em khỏi những người dùng trái phép như dưới đây:

{ 
      path: '',
      component: AdminComponent,
      children: [ 
        {
          path: 'person-list',
          component: PersonListComponent,
          canActivate: [ AuthGuardService ]
        }
      ]
    }  

canActivate nếu người dùng nhập trái phép vẫn tải mô-đun đó. bạn cần canLoad để đánh giá xem nó có cần được tải hay không.

Điều quan trọng cần lưu ý là canLoad sẽ không ngăn ai đó lấy mã nguồn của bạn. .Js sẽ không được tải xuống bằng trình duyệt trừ khi người dùng được phép, nhưng bạn có thể buộc tải xuống thủ công bằng cách nhập ('./ xxxxx.js') trên bảng điều khiển của trình duyệt.

Bạn có thể dễ dàng tìm thấy tên mô-đun trên main.js về định nghĩa các tuyến đường của bạn.