Vue路由的权限控制

it2023-10-31  73

在项目中有些页面仅能由有相应权限的用户才能查看,这时候可以给路由设置路由验证,实现权限控制功能。代码如下:

let routes=[{ path:"/a/:id", component:myA, meta:{ roles:['administrator','customer']//能够通过该路由的角色 } },{ path:"/b", component:myB, meta:{ roles:['administrator']//能够通过该路由的角色,只能由管理者通过 } }]; let router=new VueRouter({ routes:routes }); const userRole='administrator'//为了方便,这里直接用字符串代替了应从后台获取当前用户的角色名 router.beforeEach((to,from,next)=>{ if(to.meta.roles.includes(userRole)){ next();//通过验证 }else{ //这里可以提示不能跳转等操作 } });
最新回复(0)