使用動態路由實現許可權管理

我們在做專案經常遇到使用者的許可權問題，首先我們確定的許可權控制分為兩大部分，其中根據粒的大小分的更細：1、介面訪問的許可權控制；2、頁面的許可權控制：①選單中的頁面是否能被訪問；②頁面中的按鈕（增、刪、改）的許可權控制是否顯示，正常來說使用者登入後都會返回一個Token,我們把它儲蓄到cookie中，然後我們可以透過axios攔截器將cookie中的使用者資訊存到header裡面

ervice.interceptors.request.use(config => {
  if (store.getters.token) {
    config.headers['X-Token'] = getToken() // 讓每個請求攜帶自定義token 請根據實際情況自行修改
  }
  return config
}, error => {
  // Do something with request error
  console.log(error) // for debug
  Promise.reject(error)
})

getToken就是獲取cookie中的Token，service是我們建立的axios例項，這樣就是實現了介面端的許可權管理
頁面的許可權控制
具體實現思路
1 建立vue例項的時候將vue-router掛載，但這個時候vue-router掛載一些登入或者不用許可權的公用的頁面。
2 當使用者登入後，獲取用role，將role和路由表每個頁面的需要的許可權作比較，生成終端使用者可訪問的路由表。
3 呼叫router.addRoutes(store.getters.addRouters)新增使用者可訪問的路由。
4 使用vuex管理路由表，根據vuex中可訪問的路由渲染側邊欄元件。
在路由router.js裡面宣告許可權為admin的路由(非同步掛載的路由asyncRouterMap)

// router.js
import Vue from 'vue'
import Router from 'vue-router'

Vue.use(Router)

export const constantRouterMap = [
  {
    path: '/',
    redirect: '/login',
    hidden: true
  },
  {
    path: '/login',
    name: '登入頁面',
    hidden: true,
    component: resolve => require(['../views/login/Login.vue'], resolve)
  },
  {
    path: '/Readme',
    // name: 'Readmehome',
    index: 'Readme',
    meta: {
      title: 'Readme',
      icon: 'el-icon-menu'
    },
    component: resolve => require(['../components/common/Home.vue'], resolve),
    children: [
      {
        name: 'Readme',
        path: '/',
        meta: { title: 'Readme', icon: 'el-icon-menu' },
        component: resolve => require(['../components/page/Readme.vue'], resolve)
      }
    ]
  }
]

export default new Router({
  routes: constantRouterMap
})
// 非同步掛載的路由
// 動態需要根據許可權載入的路由表
export const asyncRouterMap = [
  {
    path: '/permission',
    // name: 'permissionhome',
    meta: {
      title: 'permission',
      icon: 'el-icon-setting',
      roles: ['admin']
    },
    component: resolve => require(['../components/common/Home.vue'], resolve),
    children: [
      {
        name: 'permission',
        path: '/permission',
        meta: {
          title: 'permission', icon: 'el-icon-menu', roles: ['admin']
        },
        component: resolve => require(['../components/page/permission.vue'], resolve)
      }
    ]
  },
  { path: '*', redirect: '/404', hidden: true }
]

這裡我們根據 vue-router官方推薦 324 的方法透過meta標籤來標示改頁面能訪問的許可權有哪些。如meta: { role: [‘admin’,‘super_editor’] }表示該頁面只有admin和超級編輯才能有資格進入。

注意事項：這裡有一個需要非常注意的地方就是 404 頁面一定要最後載入，如果放在constantRouterMap一同宣告瞭404，後面的所以頁面都會被攔截到404，原因就是路由匹配時是從上到下匹配的
當使用者登入後，獲取用role，將role和路由表每個頁面的需要的許可權作比較，呼叫router.addRoutes(store.getters.addRouters)新增使用者可訪問的路由，生成終端使用者可訪問的路由表。路由表存在vuex裡面
permission.js

router.beforeEach((to, from, next) => {
  if (getToken()) { // 判斷是否有token
    if (to.path === '/login') {
      next({ path: '/' })
    } else {
      if (store.getters.roles.length === 0) {
        console.log('roles====0')
        store.dispatch('GetInfo').then(res => { // 拉取使用者資訊
          const roles = res.data.roles // note: roles must be a array! such as: ['editor','develop']
          console.log('roles?', roles)
          store.dispatch('GenerateRoutes', { roles }).then(() => { // 根據roles許可權生成可訪問的路由表
            console.log('addrouters', 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(() => {
          store.dispatch('FedLogOut').then(() => {
            Message.error('驗證失敗,請重新登入')
            next({ path: '/login' })
          })
        })
      } else {
        console.log('====1')
        next() // 當有使用者許可權的時候，說明所有可訪問路由已生成 如訪問沒許可權的全面會自動進入404頁面
      }
    }
  } else {
    if (whiteList.indexOf(to.path) !== -1) {
      next()
    } else {
      next('/login')
    }
  }
})

使用vuex管理路由表，根據vuex中可訪問的路由渲染側邊欄元件（選單）。

permission_routers就是該使用者的許可權路由陣列