如何實(shí)現(xiàn)vue權(quán)限管理

/* router/indes.js */
/* 初始路由 */
let router = new Router({
  mode: 'history',
  routes: [
    {
      path: '/login',
      name: 'login',
      component: () => import('@/views/login.vue'),
    },
  ]
});

/* router/indes.js */
/* 準(zhǔn)備動(dòng)態(tài)添加的路由 */
export const dynamicRoutes = [
  {
    path: '/',
    name: 'home',
    component: () => import('@/views/home.vue'),
    meta: {
      requiresAuth: true,
    },
    children: [
      // 用戶(hù)信息
      {
        path: '/user-info',
        name: 'user-info',
        component: () => import('@/views/user-setting/user-info.vue'),
      },
      // 修改密碼
      {
        path: '/user-password',
        name: 'user-password',
        component: () => import('@/views/user-setting/user-password.vue'),
      },
    ]
  },
  {
    path: '/403',
    component: () => import('@/views/error-page/403'),
  },
  {
    path: '*',
    component: () => import('@/views/error-page/404'),
  },
];

/* router/router.js */
export default [
  // 部署管理
  {
    path: '/deploy-manage',
    name: 'deploy-manage',
    component: () => import('@/views/sys-admin/deploy-manage/deploy-manage.vue'),
    meta: {
      permitName: 'deploy-manage',
    }
  },
  // ...
];

/* login.vue */
// 發(fā)送登錄請(qǐng)求
vm.$http.login(params, data => {
  sessionStorage.token = data.token;
  // ...

  // 跳轉(zhuǎn)到首頁(yè) home。這里會(huì)觸發(fā)全局路由攔截 router.beforeEach
  vm.$router.push({ name: 'home' });
}, err => {
  console.log(err);
});

/* 全局路由攔截 */
router.beforeEach((to, from, next) => {
  // 根據(jù)有沒(méi)有token判斷是否登錄
  if (!sessionStorage.token) {
    // 1、當(dāng)用戶(hù)打開(kāi)localhost，to.matched === []，匹配的是空路由，此時(shí)需要重定向到login
    // 2、重定向到login之后，to.matched === [name: "login", path: "/login"...] 就是上一步的login頁(yè)面
    // to.matched.some(item => item.meta.requiresAuth) 這句的意思是 進(jìn)入的路由頁(yè)需要登錄認(rèn)證，取反就是不用登錄，直接通過(guò)
    if (to.matched.length > 0 && !to.matched.some(item => item.meta.requiresAuth)) {
      next(); // 跳過(guò)，進(jìn)入下一個(gè)導(dǎo)航鉤子。比如：在 /login 路由頁(yè)刷新頁(yè)面會(huì)走到此邏輯
    } else {
      next({ path: '/login' });
    }
  } else {
    // 現(xiàn)在有token了
    if (!store.state.permission.permissionList) {
      // 如果沒(méi)有 permissionList，發(fā)請(qǐng)求獲取用戶(hù)權(quán)限列表
      store.dispatch('permission/FETCH_PERMISSION').then(() => {
        next({ path: to.path, query: to.query });
      });
    } else {
      // 現(xiàn)在有 permissionList 了
      if (to.path !== '/login') {
        if (to.matched.length === 0) {
          // 如果匹配到的路由形如 https://172.24.1.117/?id=xxx&name=xxx，表明是關(guān)聯(lián)跳轉(zhuǎn)時(shí)沒(méi)有權(quán)限，跳轉(zhuǎn)到403
          next({ path: '/403' });
        } else if (queryChange) {
          // 跳轉(zhuǎn)之前將路由中查詢(xún)字符串為空的過(guò)濾掉，如 xxx.com?page=&size= 這種
          next({ name: to.name, params: to.params, query: to.query });
        } else if (sessionStorage.isSysLock === 'true' && to.path !== '/sys-lock') {
          next({ path: '/sys-lock' });
        } else {
          next();
        }
      } else {
        // 1.如果用戶(hù)手動(dòng)在地址欄輸入 /login，重定向到之前的路由頁(yè)
        // next(from.fullPath);

        // 2.如果用戶(hù)手動(dòng)在地址欄輸入 /login，清除token并刷新頁(yè)面，就會(huì)去到登錄頁(yè)
        store.commit('goToLogin');
      }
    }
  }
});

/* permission.js */
/* 由于權(quán)限這塊邏輯很多，所以在vuex添加了一個(gè)permission模塊來(lái)處理權(quán)限相關(guān)的邏輯和變量 */
import httpRequest from '@/assets/js/service/http'; // http請(qǐng)求
import handleModule from '@/assets/js/common/handle-module'; // 處理路由、側(cè)邊欄的公共函數(shù)
import router, { dynamicRoutes } from '@/router/index'; // 默認(rèn)路由配置，動(dòng)態(tài)路由配置
import permissionRouter from '@/router/router'; // 需要權(quán)限的路由配置
// ...
export default {
  // ...
  actions: {
    async FETCH_PERMISSION({ commit, state }) {
      // 初始化路由表，注意這里必須寫(xiě)，router.beforeEach 路由攔截時(shí)，多次執(zhí)行 FETCH_PERMISSION
      commit('setPermission', []);

      // 發(fā)請(qǐng)求獲取后端返回的用戶(hù)權(quán)限
      let data = await getUserByToken();
      let userPopedoms = data.userPopedoms || [];

      // 保存用戶(hù)的權(quán)限模塊（去除掉用戶(hù)管理和登錄），用戶(hù)管理模塊可以使用，權(quán)限列表
      let userPopeList = userPopedoms.filter(v => v.requestMapping !== 'user-manage' && v.requestMapping !== 'login');
      commit('setUserPopedoms', userPopeList);

      // 根據(jù)權(quán)限篩選出我們?cè)O(shè)置好的路由并加入到 path='/' 的children，就是home路由的children下
      let routes = handleModule.getRouter(userPopedoms, permissionRouter);
      let homeContainer = dynamicRoutes.find(v => v.path === '/');

      // 使用concat的目的是讓 分配給用戶(hù)的權(quán)限處于 children 的第0項(xiàng)
      homeContainer.children = routes.concat(homeContainer.children);
      // 設(shè)置首頁(yè)重定向，重定向到用戶(hù)權(quán)限的第0項(xiàng)
      homeContainer.redirect = homeContainer.children[0].name;

      // 根據(jù)權(quán)限生成左側(cè)導(dǎo)航菜單
      let sidebarMenu = handleModule.getSidebarMenu(userPopeList);
      commit('setMenu', sidebarMenu);

      // 初始路由
      let initialRoutes = router.options.routes;
      // 動(dòng)態(tài)添加路由。只有刷新頁(yè)面才會(huì)清空動(dòng)態(tài)添加的路由信息
      router.addRoutes(dynamicRoutes);
      // 完整的路由表
      commit('setPermission', [...initialRoutes, ...dynamicRoutes]);
    }
  },
};

[
 {
  "moduleGroupId": 1001,
  "moduleGroupName": "部署管理",
  "requestMapping": "deploy-manage",
 },
 {
  "moduleGroupId": 1100,
  "moduleGroupName": "系統(tǒng)管理",
  "requestMapping": "sys-manage",
  "moduleList": [
   {
    "moduleId": 1101,
    "moduleName": "系統(tǒng)日志",
    "requestMapping": "system-log",
    "moduleGroupId": 1100,
   },
   {
    "moduleId": 1102,
    "moduleName": "系統(tǒng)告警",
    "requestMapping": "sys-alert",
    "moduleGroupId": 1100,
   },
  ],
 }
]

/* handle-module.js */
const handleModule = {
  /**
   * 根據(jù)后臺(tái)返回的權(quán)限，以及配置好的所有路由，過(guò)濾出真實(shí)路由
   * @param {Array} permissionList 后臺(tái)返回的用戶(hù)權(quán)限列表
   * @param {Array} allRouter 前端配置好的所有動(dòng)態(tài)路由的集合
   * @return {Array} 過(guò)濾后的路由
   */
  getRouter(permissionList = [], allRouter = []) {
    // permissions 的格式為 ["deploy-manage", "system-log"]
    let permissions = permissionList.reduce((acc, cur) => {
      if (cur.moduleList && cur.moduleList.length > 0) cur = cur.moduleList;
      return acc.concat(cur);
    }, []).map(v => v.requestMapping);

    return allRouter.filter(item => permissions.includes(item.meta.permitName));
  },

  /**
   * 根據(jù)后臺(tái)返回的權(quán)限，生成側(cè)邊欄
   * @param {Array} permissionList 后臺(tái)返回的用戶(hù)權(quán)限列表
   * @return {Array} sidebarMenu 生成的側(cè)邊欄數(shù)組
   */
  getSidebarMenu(permissionList = []) {
    let sidebarMenu = [];
    permissionList.forEach(item => {
      let menuItem = {
        name: item.requestMapping,
        title: item.moduleGroupName,
      };
      menuItem.children = (item.moduleList || []).map(child => ({
        name: child.requestMapping,
        title: child.moduleName,
      }));
      sidebarMenu.push(menuItem);
    });

    return sidebarMenu;
  }
};
export default handleModule;

{
    path: '/',
    name: 'home',
    component: () => import('@/views/home.vue'),
    meta: {
      requiresAuth: true,
    },
    children: [
      /* 將上面得到的路由加入到這里 */
      // 用戶(hù)信息
      {
        path: '/user-info',
        name: 'user-info',
        component: () => import('@/views/user-setting/user-info.vue'),
      },
    ]
}