vue后台管理项目中配合vuex实现路由权限管理

大致以文件的形式进行描述

1.router/index.js : 该文件定义了router, 分别为 constRoutes(静态路由表，包括登录，404等) 和 asyncRouters （动态路由表，需要进行权限管理的都将定义在这里）

2.store/state.js : 在 state 中定义 asyncMenuList （动态权限列表）和 rolesId (后台返回权限码 Array)

3.store/mutation.js : 在mutations中定义方法（修改state中的asyncMenuList 、 rolesId ）：

        SET_MENU_LIST: (state, data) => {

            state.asyncMenuList = data

          }
          SET_ROLES_ID: (state, id) => {

            state.rolesId = id

          }

4.store/actions : 首先引入在router中定义的 asyncRoutes ，在登录action中将后台返回的rolesId存储在vuex中，然后在 actions 中定义GetRoutes action：

GetRoutes ({commit}, data) {
     // 该 action 被外部调用，调用后，会更新vuex中存储的asyncMenuList 
    return new Promise((resolve, reject) => {
      //判断如果data为 ‘all’，则为超级管理员，否则调用menuFiltters方法对data进行动态路由匹配
      if (data === 'all') {
        //调用mutation中定义的 SET_MENU_LIST 方法，更新vuex中存储的asyncMenuList 
        commit('SET_MENU_LIST', asyncRoutes)

      } else {

        let menuRoutes

        menuRoutes = menuFiltters(asyncRoutes, data)
        // 将匹配成功的路由更新到vuex中存储的asyncMenuList中
        commit('SET_MENU_LIST', menuRoutes)

      }

      resolve()

    })

  }

5.store/actions : 在action外部定义函数 menuFiltters 和 hasPermission

// 使用递归，匹配权限码，返回符合权限码的路由
  function menuFiltters (asyncRoutes, roles) {
    const res = []
    asyncRoutes.forEach(route => {
      const tmp = { ...route }
      if (hasPermission(roles, tmp)) {
        if (tmp.children) {
          tmp.children = menuFiltters(tmp.children, roles)
        }
        res.push(tmp)
     }
    })
    return res
  }

// 用 some 判断 router 中的权限码是否在数组 roles 中存在，存在返回true，否则返回false
  function hasPermission (roles, router) {
    return roles.some(role => router.meta.roles.includes(Number(role)))
  }

6.permission.js : 定义路由守卫，调用 actions 中的 GerRoutes , 匹配动态权限路由，代码如下

import router from './router'
import store from './store'
import { getToken, getUuid, getUserName, getRoleIDs, removeToken, removeUserName, removeRoleIDs } from '@/utils/auth'
import { asyncRoutes } from '@/router'

const whiteList = ['/login']

router.beforeEach((to, from, next) => {
  // 每次加载路由判断是否已经获取用户信息 若未获取用户信息则跳转到登录
  if (getToken() && getUuid() && getUserName() && getRoleIDs()) {
    if (to.path === '/login') {
      removeToken()
      removeUserName()
      removeRoleIDs()
      store.commit('SET_USER_NAME', '')
      store.commit('SET_USER_TOKEN', '')
      store.commit('SET_ROLES_ID', '')
      store.commit('SET_MENU_LIST', [])
      next()
    } else {
      if (store.state.asyncMenuList.length === 0) {
        if (store.state.rolesId === 'all') {
          store.dispatch('GetRoutes', 'all').then(res => {
            router.addRoutes(asyncRoutes) // 异步加载路由
            next({...to, replace: true})
          })
        } else if (store.state.rolesId.length > 0 && store.state.rolesId !== 'all') {
          let menu
          if (typeof store.state.rolesId === 'string') {
            menu = JSON.parse(store.state.rolesId)
          } else {
            menu = store.state.rolesId
          }
          store.dispatch('GetRoutes', menu).then(() => {
            router.addRoutes(store.state.asyncMenuList) // 异步加载路由
            next({...to, replace: true})
          })
        } else {
          next()
        }
      } else {
        next()
      }
    }
  } else {
    if (whiteList.indexOf(to.path) !== -1) { // 在免登录白名单，直接进入
      next()
    } else {
      next(`/login?redirect=${to.path}`) // 否则全部重定向到登录页
    }
  }
})

7.main.js : 引入permission : import './permission'，使得每一次路由跳转都会执行路由守卫
8.在页面中获得正确的动态路由进行渲染，完成整个流程

最后编辑于：2019.03.11 16:42:02