vue-admin-template改造实现后台传入路由表动态生成权限菜单

序言

因为打算做前后端分离的权限控制，并且生成动态的权限菜单，但是发现vue-admin-template是前端根据角色控制页面，并且代码写死在前端，我觉得这样不好，后面用户管理的时候添加了个角色前端就得改代码，就查阅了下资料，根据后台来传入路由表，然后再通过router.addRouters()；方法将路由表添加进去；

具体

1.后台传入路由表数据数据格式

{ "message": "success", "success": true, "code": 20000, "data": { "name": "Uncle", "avatar": "https://wpimg.wallstcn.com/f778738c-e4f8-4870-b634-56703b4acafe.gif", "roles": ["admin"], "routers": [{ "name": "Test_It", "path": "/test", "component": "Layout", "children": [{ "name": "Test_It_c", "path": "index", "component": "Test", "meta": { "icon": "example", "title": "后台" }, }] }] } }

2.前端页面将json格式化成js对象，重点是将compoent转化真实的组件对象

2.1 格式化工具

import Test from '@/views/form/index' import Layout from '@/layout' export default function (routers) { return filterAsyncRouter(routers) } //将后台返回的json权限数据格式化（递归遍历子节点） export const filterAsyncRouter=(asyncRouterMap) =>{ //遍历后台传来的路由字符串，转换为组件对象 const accessedRouters = asyncRouterMap.filter(route => { if (route.component) { if (route.component === 'Layout') { //Layout组件特殊处理 route.component = Layout } else { route.component = Test } } if (route.children && route.children.length) { route.children = filterAsyncRouter(route.children) } return true }) return accessedRouters }

2.2 获取路由表并且格式化

import {constantRouterMap} from '@/router'; const user = { state: { routers: constantRouterMap, addRouters: [] }, mutations: { SET_ROUTERS: (state, routers) => { state.addRouters = routers; //路由访问 state.routers = constantRouterMap.concat(routers); //菜单显示 } }, actions: { // 获取用户信息 GetInfo({commit,state }) { return new Promise((resolve, reject) => { getInfo(state.token).then(response => { const data = response.data commit('SET_NAME', data.name) commit('SET_ROLES', data.roles) commit('SET_AVATAR', data.avatar) commit('SET_ROUTERS', routerFormat(data.routers)) resolve(response) }).catch(error => { reject(error) }) }) }, }

3.添加路由表

全局路由拦截器

import router from './router' import store from './store' import NProgress from 'nprogress' // Progress 进度条 import 'nprogress/nprogress.css'// Progress 进度条样式 import { Message } from 'element-ui' import { getToken } from '@/utils/auth' // 验权 const whiteList = ['/login'] // 不重定向白名单 router.beforeEach((to, from, next) => { NProgress.start() if (getToken()) { if (to.path === '/login') { next({ path: '/' }) } else { if (store.getters.name.length === 0) { store.dispatch('GetInfo').then(res => { // 拉取用户信息 router.addRoutes(store.getters.routers)//添加后台路由表 next({ ...to, replace: true }) }).catch(e => { store.dispatch('FedLogOut').then(() => { Message.error('验证失败,请重新登录'+e.message) next({ path: '/login' }) }) }) } else { next() } } } else { if (whiteList.indexOf(to.path) !== -1) { next() } else { next('/login') NProgress.done() } } }) router.afterEach(() => { NProgress.done() // 结束Progress })

4.绑定路由表

路径 @/layout/componets/SideBar/index.vue 刚开始发现addRouters()之后能访问但是并没有在菜单中显示，打印出来看了下router.option.router没有添加的路由，但是自己在store里面的却有，所以这里路由绑定我就换成了store里的routers，成功显示。

routes() { return this.$store.getters.routers//大坑。。 },

源码地址

GitHub源码地址