vue-router動態路由實現前端權限管理

年初了，抱着試試水的心態出去面試了兩家公司；其中一家公司面試的時候多次問到了vue-router的動態路由實現權限管理的問題；回來後我就仔細研究了一下

router.addRoutes

動態路由是基於vue-router 新增的router.addRoutes方法來實現的；也就是爲了達到當用戶登錄之後通過判斷用的權限來覺得前端哪些頁面能展示，哪些不能展示；

第一步 創建vue-router

router/index.js內容

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import demo from '@/components/role'
import  notFind from '@/components/404'
Vue.use(Router);
//不需要權限的路由
export const constantRouterMap = [
  {
    path: '/',
    component: HelloWorld,
    name: '首頁'
  }, {
    path : '/404',
   component:notFind,
    meta : {
      title : '404未找到',
    }
  }
]
//實例化vue的時候只掛載constantRouter
export default new Router({
  routes: constantRouterMap
});

//異步掛載的路由
//動態需要根據權限加載的路由表
export const asyncRouterMap = [
  {
    path: '/role',
    component: demo,
    name: '權限測試',
    meta: { role: ['admin','super_editor'] }, //頁面需要的權限
  },{
    path : '*',
    redirect : '/404'
  }
];

第二步 在入口函數中判斷用戶權限並添加路由

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'
import { asyncRouterMap, constantRouterMap } from './router';
import Vuex from "Vuex"
import VueDND from 'awe-dnd'
import BaiduMap from 'vue-baidu-map'
Vue.use(Vuex)
function hasPermission(roles, route) {
  if (route.meta && route.meta.role) {
    console.log(roles);
    return roles.some(role => route.meta.role.indexOf(role) >= 0)
  } else {
    return true
  }
}
const store = new Vuex.Store({
  state: {
    count: 0,
    token:"asdsd",
    roles:"",
    routers:[],
    addRouters:[]
  },
  getters:{
    token(){
      return "asdsd"
    },
    roles(state ){
      return state.roles
    },
    addRouters(state){
      return state.addRouters
    },
    routers(state){
      return state.routers
    }
  },
  actions:{
    GetInfo({state}){
      return {
        data:{
          role:state.roles=["admin"]
        }
      }
    },
    GenerateRoutes({ commit }, data){
      return new Promise(resolve => {
        const { roles } = data;
        console.log(asyncRouterMap,roles);
        const accessedRouters = asyncRouterMap.filter(v => {
          if (roles.indexOf('admin') >= 0) return true;
          if (hasPermission(roles, v)) {
            if (v.children && v.children.length > 0) {
              v.children = v.children.filter(child => {
                if (hasPermission(roles, child)) {
                  return child
                }
                return false;
              });
              return v
            } else {
              return v
            }
          }
          return false;
        });
        console.log(accessedRouters);
        commit('SET_ROUTERS', accessedRouters);
        resolve();
      })
    }
  },
  mutations: {
    SET_ROUTERS: (state, routers) => {
      console.log(routers);
      state.addRouters = routers;
      state.routers = constantRouterMap.concat(routers);
    }
  }
});
router.beforeEach((to, from, next) => {
  if (store.getters.token) { // 判斷是否有token
    if (to.path === '/login') {
      next({ path: '/' });
    } else {
      if (store.getters.roles.length === 0) { // 判斷當前用戶是否已拉取完user_info信息
        store.dispatch('GetInfo').then(res => { // 拉取info
          const roles = res.data.role;
          store.dispatch('GenerateRoutes', { roles }).then(() => { // 生成可訪問的路由表
            console.log(store.getters.addRouters);
            router.addRoutes(store.getters.addRouters) // 動態添加可訪問路由表
            next({ ...to, replace: true }) // hack方法 確保addRoutes已完成 ,set the replace: true so the navigation will not leave a history record
          })
        }).catch(err => {
          console.log(err);
        });
      } else {
        next() //當有用戶權限的時候，說明所有可訪問路由已生成 如訪問沒權限的全面會自動進入404頁面
      }
    }
  } else {
    next('/login'); // 否則全部重定向到登錄頁
  }
});

這樣的話，就算用戶權限不夠，也不會看到那些頁面的靜態資源；而是直接顯示自己編輯的404頁面