目标:以一套通用的机制,去定义哪个页面需要哪些权限,而不用每个页面独立地去判断权限,提高效率。(可以在路由中定义需要的权限)
思路:
1)在路由配置文件,定义某个路由的访问权限。
2)在全局页面组件中,绑定一个全局路由监听。每次访问页面时,根据用户要访问的路由信息,先判断用户是否有对应的访问权限。
3)如果有,跳转到原页,如果没有,拦截或跳转到401鉴权或登录页。
注:1.APP.vue是全局文件
2.可以单独定义一个文件,控制路由的显隐
代码事例:
const router = useRouter();
const store = usestore();
router.beforeEach((to, from,next) ->{
//仅管理员可见,判断当前用户是否有权限
if (to.meta?.access --= "canAdmin") {
if (store.state.user.loginUser?.role !== "admin") {
next(" / noAuth ");
return;
}
}
next();
});