vue项目进入页面之前判断用户是否登录
·
户想要访问需要权限的界面,例如后台界面时候,应该首先要判断用户是否拥有权限,有则进入,无则跳转。
比如,有人要访问我的后台界面,这些对外是不开放的,如果是管理员访问则,没登录之前直接跳转到管理员登录界面。

访问后台界面

没有权限,跳转登录
具体实现是:在路由 router.ts 文件里,给需要权限的添加一个标识,表示需要权限:
// router.ts
{
path: "userManage", name: "userManage",
component: () => import('@/components/xxx.vue'),
meta: { requireAuth: true }, // look here
children: [……]
}
然后在main.ts里添加一个全局路由守卫大哥,拦截所有地址栏请求:
router.beforeEach((to, from, next) => {
if (to.meta.requireAuth) { // 需要权限
//判断当前是否拥有权限
if (localStorage.getItem('xxx')) {
next();
} else { // 无权,跳转登录
next({
path: '/userLogin',
query: { redirect: from.fullPath }
})
}
} else { // 不需要权限,直接访问
next();
}
})
就是这么简单。
注意:权限标识不用放到每个子路由里面,这样可以拦截所有的子路由页面。如果不想要拦截某些子路由,则可以在这个子路由上设置另一个标识,在全局守卫判断时添加此判断即可。
魔乐社区(Modelers.cn) 是一个中立、公益的人工智能社区,提供人工智能工具、模型、数据的托管、展示与应用协同服务,为人工智能开发及爱好者搭建开放的学习交流平台。社区通过理事会方式运作,由全产业链共同建设、共同运营、共同享有,推动国产AI生态繁荣发展。
更多推荐


所有评论(0)