vue递归菜单实现权限关联菜单
权限菜单的实现有多种做法，最常见的两种做法是：
1登陆成功，服务端直接返回权限列表路由，然后遍历展示菜单。
2 事先配置好一份儿路由表，然后针对不同的路由对象，分配对应的字段，根据用户权限字段进行递归匹配
路由表如下:
const asyncRoutes = [
{
path: '/permission',
component: Layout,
redirect: '/permission/page',
alwaysShow: true, // will always show the root menu
name: 'Permission',
meta: {
title: 'Permission',
icon: 'lock',
roles: ['admin'] // you can set roles in root nav
},
children: [
{
path: 'page',
component: () => import('@/views/permission/page'),
name: 'PagePermission',
meta: {
title: 'Page Permission',
roles: ['admin'] // or you can only set roles in sub nav
}
},
{
path: 'directive',
component: () => import('@/views/permission/directive'),
name: 'DirectivePermission',
meta: {
title: 'Directive Permission'
// if do not set roles, means: this page does not require permission
}
},
{
path: 'role',
component: () => import('@/views/permission/role'),
name: 'RolePermission',
meta: {
title: 'Role Permission',
roles: ['admin']
}
}
]
},
{
path: '/icon',
component: Layout,
children: [
{
path: 'index',
component: () => import('@/views/icons/index'),
name: 'Icons',
meta: { title: 'Icons', icon: 'icon', noCache: true }
}
]
},
/** when your routing map is too long, you can split it into small modules **/
componentsRouter,
chartsRouter,
nestedRouter,
tableRouter,
{
path: '/example',
component: Layout,
redirect: '/example/list',
name: 'Example',
meta: {
title: 'Example',
icon: 'el-icon-s-help'
},
children: [
{
path: 'create',
component: () => import('@/views/example/create'),
name: 'CreateArticle',
meta: { title: 'Create Article', icon: 'edit' }
},
{
path: 'edit/:id(\\d+)',
component: () => import('@/views/example/edit'),
name: 'EditArticle',
meta: { title: 'Edit Article', noCache: true, activeMenu: '/example/list' },
hidden: true
},
{
path: 'list',
component: () => import('@/views/example/list'),
name: 'ArticleList',
meta: { title: 'Article List', icon: 'list' }
}
]
},
{
path: '/tab',
component: Layout,
children: [
{
path: 'index',
component: () => import('@/views/tab/index'),
name: 'Tab',
meta: { title: 'Tab', icon: 'tab' }
}
]
},
{
path: '/error',
component: Layout,
redirect: 'noRedirect',
name: 'ErrorPages',
meta: {
title: 'Error Pages',
icon: '404'
},
children: [
{
path: '401',
component: () => import('@/views/error-page/401'),
name: 'Page401',
meta: { title: '401', noCache: true }
},
{
path: '404',
component: () => import('@/views/error-page/404'),
name: 'Page404',
meta: { title: '404', noCache: true }
}
]
},
]
每个路由表的路由对象在配置的时候meta字段里面有roles:['admin']这样的字段，或者多个
例如roles:['admin','editor',xxxx]多权限叠加，这个时候我们就需要遍历菜单，找到符合条件的项，代码如下
function hasPermission(roles, route) { // ['editor']
if (route.meta && route.meta.roles) {
return roles.some(role => route.meta.roles.includes(role)) // ['editor']
} else {
return true
}
}
function filterAsyncRoutes(routes, roles) {
const res = []
// 异步路由数组对象
routes.forEach(route => {
const tmp = { ...route }
if (hasPermission(roles, tmp)) {
if (tmp.children) {
tmp.children = filterAsyncRoutes(tmp.children, roles) // ['editor']
}
res.push(tmp)
}
})
return res
}
通过上面代码可以获取匹配权限的路由，然后在左侧菜单显示，角色关联权限，权限关联菜单
相关推荐HOT
更多>>
布局之浮动基础方法
再次回归到原始效果，先来看一下容器浮动以后的特点：给一号容器添加浮动，你会发现二号容器进行了补位。现在，实现让这些 li 容器横向排列，只...详情>>
2023-02-20 17:42:13
css布局之定位方法
position 属性指定了一个元素定位方式，它有五个不同的类型值：static 静态定位，relative 相对定位，fixed 固定定位，absolute 绝对定位，stic...详情>>
2023-02-20 17:41:02
必考两种盒模型说下理解
CSS 盒模型本质上是一个盒子，盒子包裹着HTML 元素，盒子由四个属性组成，从内到外分别是：content 内容、padding 内填充、border 边框、外边距...详情>>
2023-02-17 17:40:16
SPA首屏加载速度慢的问题?
在服务器我们也要做相应的配置 如果发送请求的浏览器支持gzip，就发送给它gzip格式的文件 我的服务器是用express框架搭建的 只要安装一下compre...详情>>
2023-02-15 18:06:22
京公网安备 11010802030320号