Recently, I learned
路由权限部分the second way of thinking about the implementation of the background management system, and carried out the first method introduced earlier: Vue implements dynamic routing addition (simple and no nonsense version)
这里只是记录我个人最后实现的思路，本人由于是初学者，可能思路和代码有不正确地方，还求多见谅。也请能不吝赐教，一同进步。
1. Explanation of ideas
Let’s review the previous method first : the implementation method mentioned above is that we first establish 动态路由all the 菜单权限corresponding ones , and then we actually define them. Through our request to the background, after passing the permission menu and routing corresponding to the account, we process the information and use the method to generate the final routing, so that the user enters the page without permission, because there is no real routing, it cannot be successful .页面不把路由后台router.addRoute
The second way of thinking: This time, we will establish all the 菜单权限corresponding ones , and then we will define the real ones. At this time, you can say that it does not mean that there is no limit to the user's permissions. Of course, we did not restrict the user's permissions, so we need to deal with the user's permissions next. We need to use the front guard ( ) for route navigation. We will request the background to pass all the menu permissions of the user over, and we will save the array and then compare the current array with the saved array of all menu permission routes before entering the route in the front guard of the route navigation . If it exists, let the user pass, if it does not exist, remind the user that there is no permission, and organize the routing to pass.页面把路由Router.beforeEach扁平化to.path
Second, the specific implementation
1. We first request the background to obtain all routing information and flatten it:
在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)
})
},
Original routing data format:
flattened data format:
2. Make judgments in the route navigation guard:
在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
})
}
In this way, we have realized the function. This method does not require us to dynamically add routes, because we have already defined all routes, and we only need to judge in the route navigation guard. The most difficult part is the flattening of routing. After the processing is completed, you only need to compare.