目录
应用场景：
经常有系统的权限判定，比如某个页面只能角色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 {
//调接口，记录日志
//……
}
})
总结：
其实上面主要借助的是路由守卫的拦截，对权限进行控制。
记录这篇文章时，我也去看了几篇关于路由守卫的文章，
例如：
五分钟快速了解路由守卫
http://t.csdn.cn/4DLqvVue全局路由守卫（验证登录状态）http://t.csdn.cn/uY0d9