Cách bảo vệ route bằng navigation guards?

Để bảo vệ route trong ứng dụng Vue.js sử dụng navigation guards nhằm kiểm soát quyền truy cập, bạn có thể thực hiện điều này ở nhiều cấp độ khác nhau như global, per-route, và in-component.

Global Guards

Sử dụng router.beforeEach để áp dụng logic kiểm tra cho mọi route, phù hợp khi cần xác thực quyền truy cập trên toàn bộ ứng dụng. Đoạn mã ví dụ:

router.beforeEach((to, from, next) => {
  if (to.meta.requiresAuth && !isAuthenticated()) {
    next('/login');
  } else {
    next();
  }
});

Global guards cung cấp khả năng kiểm tra quyền tập trung và thống nhất.

Per-Route Guards

Được định nghĩa trực tiếp trong cấu hình của từng route, phù hợp khi một route cụ thể yêu cầu xử lý riêng biệt. Ví dụ:

const routes = [
  {
    path: '/dashboard',
    component: Dashboard,
    beforeEnter: (to, from, next) => {
      if (!isAuthenti...