vue3系统进入页面前的权限判断和重定向方式
作者:鹤渺
这篇文章主要介绍了vue3系统进入页面前的权限判断和重定向方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
应用场景
经常有系统的权限判定,比如某个页面只能角色a进入,或者一个系统多个页面都有权限设置,根据用户的权限判断是否能进入页面,这类权限控制应该是比较基础和常见的吧。
这次就记录一下我之前做的权限控制流程。
开发流程
主要通过进入页面前的判断:router.beforeEach()
这里实现的控制,例如:
- 进入页面时判断是否登录,如果未登录就跳到login页面,如果登录了就进入到项目列表页;
- 进入项目详情页,需要判断用户是否有权限;
- 诸如以上。
详细开发流程
我在根目录文件下,新增一个permission.js页面,并在main.js中引入,借助router的路由拦截功能,实现权限判断。
1.引入权限控制文件
项目结构如下:
在main.js引入
2.权限控制详细
下面是permission里的权限控制的主要操作。
import router, { asyncRoutes } from '@/router' import { getToken, setToken, removeToken } from '@/utils/auth' import getPageTitle from '@/utils/getPageTitle' //白名单 const whiteList = ['/login', '/404', '/401', '/500'] // no redirect whitelist router.beforeEach(async (to, from, next) => { // set page title document.title = getPageTitle(to.meta.title) const hasToken = getToken() let path = to.path // 白名单中路由直接放行 if (whiteList.includes(path)) { next() return } //如果已登录,有token,则跳到重定向页面 if (hasToken) { if (to.path === '/login') { // if is logged in, redirect to the home page next({ path: '/' }) } //在这里可以进行其他判断,如果已经登录,并且不是在登录页面,即在页面C,那么可以获取用户的角色权限 ,对用户是否能进入页面C进行判断 else { next() } } else { //whiteList 里的内容不需要验签 if (whiteList.indexOf(to.path) !== -1) { next() } else { //无登录token,重定向,登录后跳转 if (to.query.token) { next(`/login?redirect=${to.path}?token=${to.query.token}`) } else { next(`/login`) } } } }) router.afterEach(async (to, from, next) => { if (to.path === '/login') { } else { //调接口,记录日志 //…… } })
总结:
其实上面主要借助的是路由守卫的拦截,对权限进行控制。
以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。