最近学习了后台管理系统路由权限部分实现的第二种思路，进行前面介绍过第一种方法: vue实现动态路由添加（简单无废话版本）
这里只是记录我个人最后实现的思路，本人由于是初学者，可能思路和代码有不正确地方，还求多见谅。也请能不吝赐教，一同进步。
一，思路讲解
先回顾前面一种方法：前面说的一种动态路由的实现方法，就是我们先将所有的菜单权限对应的页面建立好,然后我们不把真实的路由定义好。通过我们请求后台，后台将该帐号对应的权限菜单和路由传递过来后，我们通过处理信息后，利用router.addRoute方法来生成最终的路由，这样用户进入没有权限的页面，因为没有真实的路由，是无法成功的。
第二种思路： 这次的方式是我们将所有的菜单权限对应的页面建立好,然后我们把真实的路由也定义好。这时你可能会说，那不是等于没有限制用户的权限。当然，我们确实没有对用户的权限进行限制，所以接下来我们就需要对用户的权限进行处理。我们需要使用到路由导航前置守卫(Router.beforeEach)。我们会请求后台，将用户的所有菜单权限传递过来，我们进行数组的扁平化后保存起来,然后在路由导航前置守卫中每次进入路由前通过当前的to.path与保存的所有菜单权限路由的数组进行对比，如果存在就让用户通过，不存在就提醒用户无权限，并阻止路由通过。
二，具体实现
1.我们先请求后台获取到所有的路由信息并扁平化：
在pinia中完成
//扁平化数组
this.allMenuList = []
this.recursionMenu(this.menuList)
//通过递归函数将数组扁平化
recursionMenu(menuList: any) {
menuList.map((item: any) => {
if (item.children?.length > 0) {
this.recursionMenu(item.children)
}
this.allMenuList.push(item.path)
})
},
原始的路由数据格式： 扁平后的数据格式：
2. 在路由导航守卫中进行判断：
在Router.beforeEach中：
const store = useUserStore() //获取路由信息数组的pinia
if (store.judgeRoute(store.allMenuList, to.path)) {
return true //符合权限时候，允许通行
} else {
return { name: 'NotFound' } //没权限时，跳转到自定义错误页面
}
在pinia中完成：
judgeRoute(routerList, route) {
return routerList.find( el => {
return route === el
})
}
这样我们就实现了功能了，这种方式不需要我们对路由进行动态的添加，因为所有的路由我们已经都定义好了，我们只需要在路由导航守卫中进行判断即可。最难的地方是在路由的扁平化处理，处理完成后就只需对比即可了。
参考阅读
您阅读本篇文章共花了：
发表评论