最近学习了后台管理系统
路由权限部分
实现的第二种思路,进行前面介绍过第一种方法: 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
})
}
这样我们就实现了功能了,这种方式不需要我们对路由进行动态的添加,因为所有的路由我们已经都定义好了,我们只需要在路由导航守卫中进行判断即可。最难的地方是在路由的扁平化处理,处理完成后就只需对比即可了。