当前位置 博文首页 > hibiscusxin的博客：权限--后端控制路由
# router/router.js
import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router)
export const StaticRouterMap = [
{
path: '/login',
component: () => import('@/views/login/index'),
hidden: true
},
{
path: '/404',
component: () => import('@/views/404'),
hidden: true
},
{
path: '/register',
component: () => import('@/views/register/index'),
hidden: true
},
{
path: '/retrieve',
component: () => import('@/views/retrieve/index'),
hidden: true
}
export default new Router({
mode: 'hash', // 解决线上刷新404问题
scrollBehavior: () => ({ y: 0 }),
routes: StaticRouterMap
})
/* generatemenu: 是否显示在侧边栏 */
/* perimit：是否需要写入权限数组 */
/* breadcrumb：是否显示在面包屑 */
/* 0：不是 1：是 */
[
{
path: '/',
name: ''
component: Layout,
redirect: '/dashboard',
title: '',
icon: '',
id: 1,
parentId: null,
generatemenu: 1,
permit: 1,
breadcrumb: 1,
children: [{
path: 'dashboard',
name: 'Dashboard',
component: '/sales-trend/index',
redirect: '',
title: '首页',
icon: 'home',
id: 11,
parentId: 1,
generatemenu: 0,
breadcrumb: 0,
permit: 1
}]
},
{
path: '/qiantao',
name: 'Qiantao'
component: Layout,
redirect: '/qiantao/index',
title: '嵌套的路由',
icon: 'qiantao',
id: 3,
parentId: null,
generatemenu: 1,
permit: 0,
breadcrumb: 1,
children: [
{
path: 'list',
name: 'List',
component: '/qiantao/components/index',
redirect: '',
title: '嵌套首页',
icon: '',
id: 31,
parentId: 3,
generatemenu: 1,
breadcrumb: 1,
permit: 0
},
{
path: 'record',
name: 'Record',
component: '/qiantao/components/record',
redirect: '',
title: '嵌套列表',
icon: '',
id: 32,
parentId: 3,
generatemenu: 1,
breadcrumb: 1,
permit: 0
},
{
path: 'details',
name: 'Details',
component: '/qiantao/components/details',
redirect: '',
title: '详情',
icon: '',
id: 33,
parentId: 3,
generatemenu: 0,
breadcrumb: 1,
permit: 0
}
]
}
]
处理后端原始路由数据
# /utils/addRouter.js
/**
* 生成路由
* @param {Array} routerlist 格式化路由
* @returns
*/
export function addRouter(routerlist) {
const router = []
try {
routerlist.forEach((e, index) => {
let e_new = {
path: e.path,
name: e.name,
component: resolve => {
e.component === 'layout' ? require([`@/layout`], resolve) : require([`@/views${e.component}`], resolve)
}
}
if (e.redirect) {
e_new = { ...e_new, redirect: e.redirect }
}
console.log(e_new, 'e')
if (e.generateMenu === 0) {
e_new = { ...e_new, hidden: true }
}
if (e.icon !== '' && e.title !== '') {
if (e.breadcrumb === 0) {
e_new = { ...e_new, meta: { title: e.title, icon: e.icon, breadcrumb: false, permit: e.permit }}
} else {
e_new = { ...e_new, meta: { title: e.title, icon: e.icon, breadcrumb: true, permit: e.permit }}
}
} else if (e.title !== '' && e.icon === '') {
if (e.breadcrumb === 0) {
e_new = { ...e_new, meta: { title: e.title, breadcrumb: false, permit: e.permit }}
} else {
e_new = { ...e_new, meta: { title: e.title, breadcrumb: true, permit: e.permit }}
}
}
if (e.children) {
const children = addRouter(e.children)
// 保存权限
e_new = { ...e_new, children: children }
}
router.push(e_new)
})
} catch (error) {
console.error(error)
return []
}
return router
}
将处理后的路由与现有的router进行拼接，即将后端返回的动态路由与初始路由进行拼接
# src/permission
import router from '@/router'
import store from '@/store'
import user from '@/store/modules/user'
import { Message } from 'element-ui'
import NProgress from 'nprogress' // progress bar
import 'nprogress/nprogress.css' // progress bar style
import { getToken, removeToken } from '@/utils/auth' // get token from cookie
// import getPageTitle from '@/utils/get-page-title'
import { authorityMessage } from '@/api/user'
import { addRouter } from '@/utils/addRouter'
NProgress.configure({ showSpinner: false }) // NProgress Configuration
const whiteList = ['/login', '/register', '/retrieve', '/404'] // no redirect whitelist
router.beforeEach((to
