<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<script>
// 判断当前的用户是否有该路由的权限
/*
routes.filter(route => route.meta.roles.includes(user.role))
roles 是用户的权限表
[] 可以有多种权限
route就是对应的路由配置中的路由对象
roles: ['a', 'b']
route.meta.roles: ['c']
roles会被循环两次，
第一次 role是 'a'
判断a是否在route.meta.roles中
第二次 role是 'b'
判断b是否在route.meta.roles中
最终some的结果为false
roles: ['a']
route.meta.roles: ['a', 'b']
a
roles: ['a']
route
*/
const routes = [
{
path: '/a',
meta: {
roles: ['a', 'b']
}
}, {
path: '/b',
children: [
{
path: 'a',
meta: {
roles: ['a']
}
}, {
path: 'b',
meta: {
roles: ['b']
}
}
]
}
]
function hasPermission(roles, route) {
if (route.meta && route.meta.roles) {
return roles.some(role => route.meta.roles.indexOf(role) >= 0)
} else {
return true
}
}
/**
* 递归过滤异步路由表，返回符合用户角色权限的路由表
* @param asyncRouterMap
* @param roles
*/
/*
asyncRouterMap 是一个路由配置数组
[
{
children: [
{}
]
}, {}, {}
]
*/
function filterAsyncRouter(asyncRouterMap, roles) {
const accessedRouters = asyncRouterMap.filter(route => {
if (hasPermission(roles, route)) {
if (route.children && route.children.length) {
route.children = filterAsyncRouter(route.children, roles)
}
return true
}
return false
})
return accessedRouters
}
console.log(filterAsyncRouter(routes, ['a']))
/* const routes = [
{
path: '/',
meta: {
role: ['admin', 'a', 'b']
},
children: [
{
path: 'a',
meta: {
role: ['admin', 'a']
}
}
]
}, {
path: '/edit',
meta: {
role: ['admin', 'b']
}
}
] */
/*
admin
/ /a /edit
a
/ /a
b
/ /edit
*/
function filterRole (arr) {
const newArr = arr.filter(route => {
if (route.meta.role.includes('b')) {
// 当当前路由有role属性时，判断当前路由是否有children子路由，如果有子路由，则继续判断子路由中是否有role
if (route.children && route.children.length) {
// 递归筛选有对应权限的路由
route.children = filterRole(route.children)
}
return true
}
})
return newArr
}
// console.log(newArr)
// const asyncRoutes = filterRole(routes)
// 最终调用router.addRoutes(asyncRoutes)
</script>
</body>
</html>
