vue如何根据权限生成动态路由、导航栏

目录

• 基本思路
• 相关代码

基本思路

1、创建vueRouter，用公共路由实例化

2、创建需要根据权限筛选的路由对象（在路由对象，添加必要的权限判断字段）

3、登录完成,由后端配合返回当前用户的权限集合

4、筛选出有权限的路由对象，利用vueRouter的addRoutes方法，生成完整路由

5、处理刷新页面导致vueRouter重新实例化导致路由对象不完善 （利用router.beforeEach导航守卫，,利用addRoutes()完善 路由对象 ）

6、侧边导航栏相关代码

相关代码

根据上面的顺序

1、如下

Vue.use(Router)
// 公共路由
export const publicRoutes = [
  {
    path: '/',
    name: 'login',
    component: login,
    meta: {
      title: '登录'
    }
  }
]
// 需要根据权限筛选的路由
export const asyncRoutes = [
  ...Home,
  ...Seting,
  ...CRM,
  {
    path: '*',
    component: login,
    meta: {
      hidden: true
    },
    redirect: '/'
  }
]
const vr = new Router({
  mode: 'history',
  routes: publicRoutes
})

2、以seting模块为例，role为判断是的权限字段，角色有这个字段对应的值就有当前页面的权限

import Layout from '@/views/layout/layout.vue'
const account = r => require.ensure([], () => r(require('@/views/seting/account/account.vue')), 'seting');
const logs = r => require.ensure([], () => r(require('@/views/seting/logs/logs.vue')), 'seting');
const role = r => require.ensure([], () => r(require('@/views/seting/role/role.vue')), 'seting');
const Seting = [
  {
    path: '/seting',
    component: Layout,
    redirect: '/seting/account',
    meta: {
      title: '系统设置',
      role: '123c6c6514d416472e640bc3f49297c550',
      icon: 'icon-xitong'
    },
    children: [
      {
        path: 'account',
        name: 'account',
        component: account,
        meta: {
          title: '账号管理',
          role: '1325cdeb897cc7f8e951d647de9b1d8e11',
        }
      },
      {
        path: 'logs',
        name: 'logs',
        component: logs,
        meta: {
          title: '日志管理',
          role: '14bfbb0337ad3e7e2c9fc101294c3fe645',
        }
      },
      {
        path: 'role',
        name: 'role',
        component: role,
        meta: {
          title: '角色管理',
          role: '1559d1c05d15a0dce5549b8bf5a58c0cf9',
        }
      }
    ]
  }
]
export default Seting

如果有一些详情页不需要在导航列表展示还可以添加字段，在生成导航栏时去掉

eg：

 {
            path: 'addJoiner',
            name: 'addJoiner',
            component: addJoiner,
            meta: {
              hidden: true,  // 隐藏字段
              title: '***详情页',
              role: '14bfbb0337ad3e7e2c9fc101294c3fe645',
            }
          },

3、登录获取权限集合和基本信息

 // 登录
    login () {
      this.rememberPassword()
      this.$refs.form.validate((valid) => {
        if (valid) {
          this.loading = true
          let params = {
            login_name: this.form.user,
            password: this.form.password,
            code: this.form.yanzhenma,
          }
          this.$api.post('api/user/login', params).then(res => {
            if (res.err_code === 1) {
              // 把用户的基本信息储存在vuex，中
              this.$store.dispatch('setBaseInfo', res.data).then(() => {
                // 获取有权限的路由表，添加到路由
                router.addRoutes(this.$store.getters.addRouters)
                this.$router.push({ name: 'home' })
              })
            }
            this.loading = false
          })
        }
      })

部分vuex代码

如果不太理解，点击下面链接：

vuex刷新就没了解决方案

秒懂vuex

actions.js

// import api from '@/api'
const actions = {
  setBaseInfo ({
    commit
  }, data) {
    return new Promise(resolve => {
      commit('set_userInfo', data.userInfo)
      commit('set_token', data.token)
      commit('set_roles', data.menus)
      // 把基本信息保存在本地防止刷新之后丢失
      sessionStorage.setItem('baseInfo', JSON.stringify(data))
      resolve()
    })
  }
}
export default actions

mutations.js

const setStorage = (key, value) => {
  if (typeof (value) === 'object') {
    value = JSON.stringify(value)
  }
  sessionStorage.setItem(key, value)
}
/*
* 避免刷新之后vuex被重置，在sessionStorage做一个备份
 */
const mutations = {
  set_userInfo (state, payload) {
    state.userInfo = payload
    setStorage('userInfo', payload)
  },
  set_token (state, payload) {
    state.token = payload
    setStorage('token', payload)
  },
  set_roles (state, payload) {
    state.roles = payload
    setStorage('roles', payload)
  },
  set_breadcrumb (state, payload) {
    state.breadcrumb = payload
    setStorage('breadcrumb', payload)/*  */
  },
  changeCollapsed (state, payload) {
    state.isCollapsed = payload
  }
}
export default mutations

getters.js

import createdRoutes from '@/utils/createdRoutes.js'
import { asyncRoutes } from '@/router/index.js'
let getStoryage = (item) => {
  let str = sessionStorage.getItem(item)
  return JSON.parse(str)
}
const getters = {
  get_userInfo: (state) => {
    return state.userInfo ? state.userInfo : getStoryage('userInfo')
  },
  get_token: (state) => {
    return state.token ? state.token : sessionStorage.getItem('token')
  },
  get_roles: (state) => {
    return state.roles.length ? state.roles : getStoryage('roles')
  },
  addRouters: (state, getters) => {
    let routes = createdRoutes(asyncRoutes, getters.get_roles)
    return routes
  },
  get_breadcrumb: (state, getters) => {
    return state.breadcrumb.length ? state.breadcrumb : getStoryage('getStoryage')
  }
}
export default getters;

4、核心的筛选需要权限的路由方法:createdRoutes()

也就是3的getters，用到的方法，毫无保留奉上

/**
 * 判单当前的路由对象是否在登录人的权限之内
 * @param {Array} roles 权限
 * @param {Object} route 路由
 */
function hasPermission (roles, route) {
  if (route.meta && route.meta.role) { // 路由需要权限就要在权限数组里面判断
    return roles.includes(route.meta.role)
  } else { // 不需要权限就直接通过
    return true
  }
}
/**
 * 根据接口获取的权限列表动态生成当前用户的侧边导航栏，返回通过权限验证的路由数组
 * @param {Array} asyncRoutes 需要过滤的路由
 * @param {Array} roles 权限
 */
function createdRoutes (asyncRoutes, roles) {
  const accessedRouters = asyncRoutes.filter(route => {
    if (hasPermission(roles, route)) { // 当前路由通过权限验证直接通过
      if (route.children && route.children.length) { // 当前路由有子路由，就递归验证
        route.children = createdRoutes(route.children, roles)
      }
      return true
    }
    return false
  })
  return accessedRouters
}
export default createdRoutes

5、处理刷新带来的问题

其实这里的代码是连接1的，注意注释

// 全局的导航守卫
vr.beforeEach((to, from, next) => {
  // 刷新页面之后导致vue-router和vuex重置，路由丢失，利用的就是刷新后vuex的state被重置判断
  if (to.name !== 'login' && !store.state.token) {
    // 避免直接不登陆进页面
    if (!sessionStorage.getItem('token')) {
      location.href = '/'
      return
    }
    let data = JSON.parse(sessionStorage.getItem('baseInfo'))
    store.dispatch('setBaseInfo', data).then(() => {
      vr.addRoutes(store.getters.addRouters)
    })
  }
  // 设置面包屑导航
  let breadcrumb = to.matched.filter(item => item.meta.title)
  if (breadcrumb.length) {
    breadcrumb = breadcrumb.map(item => item.meta.title)
    store.commit('set_breadcrumb', breadcrumb)
  }
  // 设置title
  document.title = to.meta.title
  next()
})

6、侧边导航栏的完整代码

还是遍历的根据权限生成的路由表，干掉一些需要隐藏的详情页之类， 

这里的代码和过滤l路由的核心函数，要根据自己的业务做相应的处理

element-ui的menu

路由图

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。