之前有人问我 ,如果是二级路由如何添加,这里我做一个补充吧。直接拿方法去用就行。也不做解释了。稍微看下就能看懂了
假设,后端返回给我们一个数据 [“/defa”,"/defa/defa1"] 这样的一个路由表,我们就需要通过这个路由表去筛选匹配我们的动态路由,然后在进行添加。假设我们的动态路由是
[
{
path: "/defa",
name: "defa",
component: () => import("@/views/DefaCat.vue"),
children: [
{
path: "/defa/fase1",
name: "homelist1",
component: () => import("@/views/UserZi.vue"),
},
{
path: "/defa/fase9",
name: "homelist9",
component: () => import("@/views/UserZi.vue"),
},
],
},
{
path: "/defa/fase2",
name: "homelist2",
component: () => import("@/views/UserZi.vue"),
},
];
这样的一组数据,按照后端返回给我们的数据表,我们最终要拿到的数据是。
[
{
path: "/defa",
name: "defa",
component: () => import("@/views/DefaCat.vue"),
children: [
{
path: "/defa/fase1",
name: "homelist1",
component: () => import("@/views/UserZi.vue"),
},
],
},
];
这样才符合我们的设计需要,所以这里添加了一个方法,能够筛选出符合我们的代码,注意,这有2个弊端,第一,是当你父路由不存在后端的路由表而子路由存在时,子路由照样会被剔除掉,第二解释,只能筛选2层,也就是说动态路由里只有父路由子路由,多的无法筛选了。
const filterRoutes = (targetPaths:any, sourceRoutes:any) => {
return sourceRoutes.map((route:any) => {
const filteredChildren = route.children
? route.children.filter((child:any) => targetPaths.includes(child.path))
: [];
return {
...route,
children: filteredChildren,
};
}).filter((route:any) => route.children.length > 0 || targetPaths.includes(route.path));
};
函数接收2个参数,第一个参数是后端传给我的路由表[“/defa”,"/defa/defa1"] ,第二个参数就是前端定义的整个的动态路由,函数的返回值就是我们的数据啦。我们可以根据这个数据动态添加路由或者是导航栏的权限控制
简易版的动态添加路由,可以作为参考,这里没有加入token是否存在的逻辑。
router.beforeEach((to, from, next) => {
console.log(to.name, 99);
if (!to.name) {
filterRoutes(arrlist,routerlist).map((item: any) => {
router.addRoute(item);
});
next({ ...to, replace: true });
} else {
next();
}
next();
});
现在来说应该算是完全好了,这个这个权限组件,这里我们前端做的事情太多了,可以把活适当的分一点给后端,让后端传我们能直接用的路由表,不是更爽吗 哈哈。文章来源:https://www.toymoban.com/news/detail-810009.html
我看哪天有时间,我会出一版封装好的有权限管理的vue3框架,包括路由权限和导航栏权限都会封装好,开箱即用。文章来源地址https://www.toymoban.com/news/detail-810009.html
到了这里,关于补充 vue3用户管理权限(路由控制)的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!