Vue路由權限詳解

一、路由權限管理的背景和目的

路由權限管理是前端開發中常見的需求，主要目的是控制用戶或角色對某些頁面的訪問權限。在一個Web應用中，有些頁面只能是管理員或VIP用戶才能訪問，比如後台管理系統或支付頁面。如果沒有路由權限管理，普通用戶可能會通過直接輸入URL來訪問到這些頁面。為了保護應用的安全性和用戶的隱私，需要對這些頁面進行權限控制，僅允許有權限的用戶訪問。

二、基本實現方式

在Vue中，可以通過Vue Router來管理路由。權限管理的實現方式主要有以下幾種：

在路由的meta字段中添加需要的權限信息，然後在路由導航守衛中進行鑒權控制
在路由組件的created或mounted生命周期中進行鑒權控制
通過Vuex來管理用戶的登陸狀態以及權限，然後在路由導航守衛中進行鑒權控制

1. 在路由的meta字段中添加需要的權限信息

  
// 定義路由
const routes = [
  {
    path: '/admin',
    name: 'admin',
    component: Admin,
    meta: {
      requiresAuth: true, // 需要登錄才能訪問
      isAdmin: true // 需要是管理員才能訪問
    }
  },
  // 其他路由...
];

// 導航守衛
router.beforeEach((to, from, next) => {
  if (to.matched.some(record => record.meta.requiresAuth) && !isAuthenticated()) {
    // 還未登錄，跳轉到登錄頁面
    next('/login');
  } else if (to.matched.some(record => record.meta.isAdmin) && !isAdmin()) {
    // 不是管理員，沒有權限
    next('/404');
  } else {
    next();
  }
});

2. 在路由組件的created或mounted生命周期中進行鑒權控制

  
// 定義路由
const routes = [
  {
    path: '/admin',
    name: 'admin',
    component: Admin,
    meta: {
      requiresAuth: true, // 需要登錄才能訪問
    }
  },
  // 其他路由...
];

// 在路由組件中進行鑒權控制
export default {
  name: 'Admin',
  created() {
    if (!isAuthenticated()) {
      // 還未登錄，跳轉到登錄頁面
      this.$router.push('/login');
    }
  }
};

3. 通過Vuex來管理用戶的登陸狀態以及權限

  
// 在Vuex中定義state、actions和mutations
const state = {
  isAuthenticated: false,
  isAdmin: false
};

const actions = {
  login({ commit }) {
    // 登錄成功後，設置isAuthenticated為true
    commit('setIsAuthenticated', true);
  },
  logout({ commit }) {
    // 登出後，重置isAuthenticated為false
    commit('setIsAuthenticated', false);
  },
  setIsAdmin({ commit }, isAdmin) {
    // 根據用戶的角色設置isAdmin
    commit('setIsAdmin', isAdmin);
  }
};

const mutations = {
  setIsAuthenticated(state, isAuthenticated) {
    state.isAuthenticated = isAuthenticated;
  },
  setIsAdmin(state, isAdmin) {
    state.isAdmin = isAdmin;
  }
};

// 定義路由
const routes = [
  {
    path: '/admin',
    name: 'admin',
    component: Admin,
    meta: {
      requiresAuth: true, // 需要登錄才能訪問
      isAdmin: true // 需要是管理員才能訪問
    }
  },
  // 其他路由...
];

// 導航守衛
router.beforeEach((to, from, next) => {
  if (to.matched.some(record => record.meta.requiresAuth) && !state.isAuthenticated) {
    // 還未登錄，跳轉到登錄頁面
    next('/login');
  } else if (to.matched.some(record => record.meta.isAdmin) && !state.isAdmin) {
    // 不是管理員，沒有權限
    next('/404');
  } else {
    next();
  }
});

三、路由權限管理的進一步優化

基本實現方式可以滿足一般的需求，但有時還需要更精細的權限控制。比如，一個頁面可能不僅要求用戶已登錄，還需要用戶擁有某種特定的角色才能訪問。這時需要對路由權限控制進行進一步的優化。

1. 根據用戶角色動態生成路由

某些頁面只有管理員才能訪問，而管理員賬號可以隨時添加或刪除。在這種情況下，如果將需要管理員才能訪問的路由信息寫死在代碼中，那麼每次管理員賬號變化時都需要修改代碼。為了解決這個問題，可以根據用戶角色動態生成路由。

  
// 在路由組件之外定義路由配置
export const asyncRoutes = [
  {
    path: '/admin',
    name: 'admin',
    component: Admin,
    meta: {
      requiresAuth: true,
      isAdmin: true
    }
  },
  {
    path: '/vip',
    name: 'vip',
    component: Vip,
    meta: {
      requiresAuth: true,
      isVip: true
    }
  },
  // 其他路由...
];

// 在router.js中引入路由配置
import { asyncRoutes } from './routes';

// 定義靜態路由
const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home
  },
  {
    path: '/login',
    name: 'Login',
    component: Login
  },
  // 其他路由...
];

// 根據用戶角色生成路由
router.beforeEach((to, from, next) => {
  // 獲取當前用戶角色
  const role = store.state.role;

  // 動態生成路由
  const accessRoutes = asyncRoutes.filter(route => {
    if (route.meta[role]) {
      return true;
    }
    return false;
  });

  // 將動態生成的路由添加到路由器中
  router.addRoutes(accessRoutes);

  next();
});

2. 控制菜單的顯示和隱藏

在應用中，菜單是常見的元素之一。有時需要在菜單中只顯示當前用戶有權限訪問的頁面，而隱藏不能訪問的頁面。為了實現這一功能，需要在菜單組件中根據用戶權限動態生成菜單。

  
// 在菜單組件中根據用戶角色動態生成菜單

  
    
      {{item.title}}
      
        
          {{child.title}}
        
      
    
  



  import { asyncRoutes } from '../router/routes';
  export default {
    data() {
      return {
        menu: []
      };
    },
    mounted() {
      // 獲取當前用戶角色
      const role = store.state.role;

      // 動態生成菜單
      const menu = asyncRoutes.filter(route => {
        if (route.meta[role]) {
          return true;
        }
        return false;
      }).map(route => {
        const item = {
          path: route.path,
          title: route.meta.title,
        };

        if (route.children && route.children.length > 0) {
          item.children = route.children.map(child => {
            return {
              path: child.path,
              title: child.meta.title
            };
          });
        }

        return item;
      });

      this.menu = menu;
    }
  };

3. 根據路由層級進行權限控制

有些頁面只有在特定的父級頁面下才能訪問。例如，在後台管理系統中，賬號管理和訂單管理頁面只有在管理員設置頁面下才能訪問。為了解決這個問題，可以在路由配置中使用嵌套路由，並在導航守衛中根據路由層級進行權限控制。

  
// 在路由組件中定義嵌套路由
const routes = [
  {
    path: '/admin',
    name: 'admin',
    component: Admin,
    meta: {
      requiresAuth: true, // 需要登錄才能訪問
      isAdmin: true // 需要是管理員才能訪問
    },
    children: [
      {
        path: 'account',
        name: 'account',
        component: Account,
        meta: {
          requiresParent: 'admin' // 只有在admin下才能訪問
        }
      },
      {
        path: 'order',
        name: 'order',
        component: Order,
        meta: {
          requiresParent: 'admin' // 只有在admin下才能訪問
        }
      }
    ]
  },
  // 其他路由...
];

// 導航守衛中根據路由層級進行權限控制
router.beforeEach((to, from, next) => {
  if (to.matched.some(record => record.meta.requiresAuth) && !isAuthenticated()) {
    // 還未登錄，跳轉到登錄頁面
    next('/login');
  } else if (to.matched.some(record => record.meta.requiresParent)) {
    // 需要在特定的父級頁面下
    const parentRoute = to.matched[1];
    if (parentRoute.name !== to.meta.requiresParent) {
      next('/404');
    } else {
      next();
    }
  } else {
    next();
  }
});

原創文章，作者：小藍，如若轉載，請註明出處：https://www.506064.com/zh-hk/n/153702.html