使用vue开发一些功能时,需要动态的判断是否有权限进入该路由,特别是一些后台系统,如果单一的只有几个角色的权限配置还好,如果是每个权限都需要配置,这个时候就需要使用到vue的动态路由了
一般的动态路由,有固定的权限的,可以在前端存储一份权限路由,可以移步 vue-element-admin,比较详细。
1.我们需要后端的配合,如果后端给的数据格式不合适,你需要做大量的操作来洗数据,数据格式可以按照这种
[
{
path: '/home',
component: 'Layout',
name: "首页",
meta: {
icon: 'home',
},
redirect: "/home/list",
children: [
{
path: 'list',
component: '/home/list',
name: "列表",
meta: {
icon: 'list',
},
}
]
}
]
2.我们首先要在路由守卫 beforeEach 里判断是否已登录,如已登录再判断是否已经添加过路由,如未添加去调用获取路由列表的方法
// 判断是否已经添加过路由
let flag = false;
router.beforeEach(async (to, from, next) => {
// 判断token是否存在的函数
const hasToken = getToken();
// token存在,已经登录
if (hasToken) {
// 判断路由是否已经保存了
if (!flag) {
// 未储存路由,调用方法向服务器获取路由
await getUserRouters();
flag = true;
next({ ...to, replace: true })
}
if(to.path === '/login') {
next({ path: '/' })
} else {
next();
}
} else {
next(`/login?redirect=${to.path}`)
}
})
3.获取路由列表方法
// 向服务器获取路由
const getUserRouters = () => {
return new Promise((reslove, reject) => {
// 请求路由的api
getLoginUserPermission().then((res) => {
// 拷贝路由数据
const data = res.data.list
if (!data.length) { // 路由为空就说明无权限
Message({
message: "当前账号暂无任何权限",
duration: 5000,
type: "warning"
})
reject()
return
}
// 存储路由到vuex中
store.dispatch('user/AddRouter', data);
// 路由筛选函数
const addRoute = formatRoutes(data)
// 动态路由添加
router.addRoutes(addRoute)
//添加完动态路由再将404跳转添加
router.addRoutes([{
path: '*',
redirect: '/404',
hidden: true
}])
reslove()
})
})
}
4.遍历转换路由格式
// 遍历转换路由格式
function formatRoutes(menu) {
const routers = [];
menu.forEach(v => {
const {
component,
children
} = v;
if (component) {
if (component === "Layout") { // Layout 组件做特殊处理
v.component = Layout;
} else {
v.component = (resole) => require([`@/views${component}`], resole)
}
if(children && children.length) {
v.children = formatRoutes(children)
}
routers.push(v);
}
})
// 返回已经洗好的数据
return routers
}
文章到这里,动态路由就已经完成了