基於vue-router的動態權限實現方案

使用vue開發帶權限管理系統，尤爲是採用了vue-router作路由，不少人都遇到的一個問題就是如何動態加載路由path對應的component。

典型的應用場景就是：前端菜單不靜態的寫在vue程序裏，而是要從後臺程序和數據庫返回的菜單來動態加載到vue應用中。

網上不少問權限的問題，但幾乎找不到很好的解決答案，在很長一段時間裏，很是打擊使用vue技術棧開發的信心。最有質量的一篇文章是：
http://blog.csdn.net/s8460049...
但做者並無徹底解決這個問題，還留有幾個問題是：
1）登陸以後跳轉到首頁，此時路由已是加載完成的了不能更改，菜單能夠顯示可是沒有路由。
2）前端應用人爲刷新網頁路由產生某些問題。

本文即在這篇文章的基礎上對這兩個問題解決，以使其完整。

前提是認真拜讀上面提到的那篇文章，下面直接用代碼說話:

問題1的解決思路：
登陸以後跳轉到首頁，router是vue應用的router 引入進登陸方法，在登陸以後跳轉以前對router進行改變，改變要點1是精確賦值到router的routes具體地方，好比我這裏是routes[0]的子路由，2是用addRoutes函數使其生效。

登陸功能的js

export const login = ({commit}, data) => {  Service.post('/login', Qs.stringify(data))
    .then(res => {
      const success = Object.is(res.statusText, 'OK') && Object.is(res.data.code, '0')
      if (success) {
        var menus = generateMenus(res.data.menus)
        window.sessionStorage.routes = JSON.stringify(menus)
        if (menuModule.state.items.length <= 0) { // 避免註銷後在不刷新頁面的狀況下再登陸重複加載路由
          commit(types.ADD_MENU, menus)
          // 動態加載路由關鍵2行
          router.options.routes[0].children.push(...generateRoutesFromMenu(menuModule.state.items))
          router.addRoutes(router.options.routes)
        }
        window.sessionStorage.loginName = data.loginName
        router.push({path: '/'})
      } else {
        commit('loginErr', res.data.msg)
      }
    })
}


function generateRoutesFromMenu (menu = [], routes = []) {
  for (let i = 0, l = menu.length; i < l; i++) {
    let item = menu[i]
    if (item.path) {
      routes.push(item)
    }
    if (!item.component) {
      item.component = resolve => require([`views/` + item.component + `.vue`], resolve)
      generateRoutesFromMenu(item.children, routes)
    }
  }
  return routes
}

問題2的解決思路：
是不在主app裏引入實例化vue-router的js，而是直接在app裏實例化router，目的就是網頁刷新的時候每次都確保生成動態的router。

app.js部分代碼：

Vue.use(Router)
let menus = window.sessionStorage.routes //登陸成功返回的菜單
if (menus) {
  let items = JSON.parse(menus)
  store.commit(ADD_MENU, items)
}

const router = new Router({
  mode: 'hash',
  linkActiveClass: 'is-active',
  scrollBehavior: () => ({ y: 0 }),
  routes: [
    {
      name: 'Main',
      path: '/',
      component: require('views/Main.vue'),
      children: [ //動態路由之因此做爲Main的子路由是基於：登陸以後跳轉到Main主頁，該主頁是相似於frame的頁面加載框架，只有將動態路由做爲Main的子路由才能確保其餘頁面顯示到Main框架內。
        ...generateRoutesFromMenu(menuModule.state.items)
      ]
    },
    {
      name: 'Login',
      path: '/login',
      component: require('views/Login.vue')
    }
  ]
})

function generateRoutesFromMenu (menu = [], routes = []) {
  for (let i = 0, l = menu.length; i < l; i++) {
    let item = menu[i]
    if (item.path) {
      routes.push(item)
    }
    if (!item.component) {
      item.component = resolve => require([`views/` + item.component + `.vue`], resolve)
      generateRoutesFromMenu(item.children, routes)
    }
  }
  return routes
}

另附menu items代碼

const state = {
  items: [  // 什麼菜單都不定義，徹底由後端返回
  ]
}
const mutations = {
  [types.ADD_MENU] (state, menuItems) {
    if (menuItems.length > 0) {
      menuItems.map(function (item) {
        item.children.map(function (child) {
          child.component = lazyLoading(child.component)
        })
      })
      state.items.push(...menuItems)
    }
  },

lazyloding

export default (name, index = false) => () => import(`views/${name}${index ? '/index' : ''}.vue`)

git代碼暫不能所有公開，有問題可留言。

**

更新：

如今公開git代碼：
https://github.com/m3shine/vu...
注意：
本文講的內容是基於cookie的，這次公開的代碼是純淨的代碼，不含業務，登陸是基於vue-jwt-auth，動態路由部分原理跟本文講到的地方同樣。

**

打個區塊鏈小程序的廣告：
https://www.sbeauty.la