目录

应用场景：

开发流程：

详细开发流程：

1.引入权限控制文件

 2.权限控制详细

总结：

---

应用场景：

经常有系统的权限判定，比如某个页面只能角色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

三种路由守卫的写法http://t.csdn.cn/yop8z