Nguồn:

Vue Router Documentation

Giới Thiệu

Chào các bạn! Trong bài viết này, mình sẽ hướng dẫn các bạn cách phân quyền router trong VueJS bằng việc sử dụng Vue-Router 4. Mình sẽ đi sâu vào cách xử lý logic ngay trong VueRouter và mỗi bạn có thể tự áp dụng dữ liệu phân quyền của riêng mình vào từng bài tập hoặc dự án cụ thể.

Phân quyền trong VueJS là một phương pháp cho phép chúng ta ảnh hưởng đến dữ liệu phân quyền trước khi router chuyển hướng đến trang đích. Để thực hiện điều này, chúng ta sẽ sử dụng Navigation Guards trong VueJS, được chia thành ba loại chính:

1. Globally Guard - Can thiệp vào toàn bộ router
2. Per-Route Guard - Can thiệp vào từng router
3. In-Component Guards - Can thiệp vào từng component trong VueJS

Áp Dụng

1. Globally Guard - Can Thiệp Vào Tất Cả Router

Với Global Guards, bạn có thể can thiệp vào toàn bộ routing đã được định nghĩa trong VueRouter. Có ba hook có sẵn mà bạn có thể sử dụng tại ba thời điểm khác nhau:

• beforeEach (Global Before Guards): Được gọi khi một router nào đó được kích hoạt. Tham số gồm có "to" (router người dùng muốn đến) và "from" (router hiện tại).

  javascript Copy

  router.beforeEach(async (to) => {
      const token = window.$cookies.get(generateStorageKey(APP_TOKEN_NAME));
      const userInfo = JSON.parse(localStorage.getItem('userInfo'));
      return checkRouterWithTokenAndRole(token, to, userInfo);
  });

• beforeResolve (Global Resolve Guards): Được gọi ngay sau khi thực hiện beforeEach và trước khi điều hướng được xác nhận. Đây là nơi lý tưởng để lấy dữ liệu cần thiết.

  javascript Copy

  router.beforeResolve(async to => {
    if (to.meta.requiresCamera) {
      try {
        await askForCameraPermission();
      } catch (error) {
        return false;
      }
    }
  });

• afterEach (Global After Hooks): Được gọi sau khi tất cả logic điều hướng đã hoàn tất. Dùng để thực hiện các hành động như cập nhật tiêu đề trang hay thay đổi menu.

  javascript Copy

  router.afterEach((to, from, failure) => {
      changeMenuWidthPermission();
  });

2. Per-Route Guard – Can Thiệp Vào Từng Router

Per-Route Guard chỉ can thiệp vào các router mà bạn đã định nghĩa cụ thể:

• beforeEnter: Kích hoạt trước khi router chuyển hướng. Rất hữu ích khi làm việc với các tuyến đường lồng nhau.

  javascript Copy

  const routes = [
      {
          path: '/user',
          beforeEnter() {
              // ... xử lý logic kiểm tra 
          },
          children: [
              { path: 'list', component: UserList },
              { path: 'details', component: UserDetails }
          ]
      }
  ];

3. Component Guards – Can Thiệp Vào Từng Component

Component Guards là mức độ can thiệp nhỏ nhất trong VueJS:

• beforeRouteEnter: Được gọi trước khi điều hướng được xác nhận và không thể truy cập vào "this" của Vue.

• beforeRouteUpdate: Được gọi khi router đã thay đổi nhưng component vẫn được sử dụng lại.

• beforeRouteLeave: Được gọi trước khi chuyển hướng ra khỏi component, dùng để ngăn người dùng thoát nếu có dữ liệu chưa được lưu.

beforeRouterLeave: (to, from) => {
    const answer = window.confirm('Bạn có thực sự muốn rời trang này?');
    if (!answer) { return false; }
},

Kết Luận

Việc sử dụng phân quyền trong router có thể được thực hiện ở nhiều cấp độ khác nhau, bao gồm việc điều hướng router, xử lý logic khi người dùng không thể truy cập trang, hay cập nhật thông tin như tiêu đề trang và menu. Sự linh hoạt này giúp bạn tạo ra ứng dụng web an toàn và tương tác hơn.

Tóm Tắt

• Globally Guard: beforeEach, beforeResolve
• Per-Route Guard: beforeEnter
• Component Guards: beforeRouteEnter.

Hãy bắt tay vào thực hành và tích hợp phân quyền vào dự án VueJS của bạn ngay hôm nay!
source: viblo