登录权限业务流程

当我们完成了登入页面并获取到token之后，我们要对首页及其他页面的访问权限进行限制
根据token访问页面的权限，我们可以写在路由守卫文件里

src/permission.js

业务逻辑写在路由的前置守卫里面

router.beforeEach((to, from, next)=>{})
复制代码

思路
- 有token
  - 判断用户要进入的页面
    - 登入页面：跳转到首页去
    - 其他页面：放行
- 没有token
  - 判断用户要进入的页面是否在路由白名单
    - 白名单页面：放行
    - 其他页面：跳转到登录页面

实现代码：

// 权限拦截 导航守卫 路由守卫  router
import router from '@/router' // 引入路由实例
import store from '@/store' // 引入vuex store实例
import NProgress from 'nprogress' // 引入一份进度条插件
import 'nprogress/nprogress.css' // 引入进度条样式

const whiteList = ['/login', '/404'] // 定义白名单  所有不受权限控制的页面
// 路由的前置守卫
router.beforeEach(function(to, from, next) {
  NProgress.start() // 开启进度条
  //  首先判断有无token
  if (store.getters.token) {
    //   如果有token 继续判断是不是去登录页
    if (to.path === '/login') {
      //  表示去的是登录页
      next('/') // 跳到主页
      NProgress.done() // 手动强制关闭一次  为了解决 手动切换地址时  进度条的不关闭的问题
    } else {
      next() // 直接放行
    }
  } else {
    // 如果没有token
    if (whiteList.indexOf(to.path) > -1) {
      // 如果找到了 表示在在名单里面
      next()
    } else {
      next('/login') // 跳到登录页
      NProgress.done() // 手动强制关闭一次  为了解决 手动切换地址时  进度条的不关闭的问题
    }
  }
})
// 后置守卫
router.afterEach(function() {
  NProgress.done() // 关闭进度条
})
复制代码

注意：

代码块的token是存在vuex模块里，所以通过getters获取
代码块中还引入了进度条来增加用户体验
- 路由切换成功
  - 前置路由开头开启进度条
  - 后置守卫关闭进度条
- 路由切换被拦截
  - 前置路由开头开启进度条
  - 跳转首页或者跳转登录页后面关闭进度条

请求拦截器注入token

每次在接口中携带钥匙（token）很麻烦，所以我们可以在axios拦截器中统一注入token

在二次封装aixos的request.js文件夹中，找到请求拦截器

service.interceptors.request.use(config => {
return config // 必须返回配置})
复制代码

通过给config.headers给请求头注入token

service.interceptors.request.use(config => {
  // 在这个位置需要统一的去注入token
  if (store.getters.token) {
    // 如果token存在 注入token
    config.headers['Authorization'] = `Bearer ${store.getters.token}`
  }
  return config // 必须返回配置
}, error => {
  return Promise.reject(error)
}) 
复制代码

注意：

['Authorization']为token值得key名，不同的项目里key不一定一样，详细看自己项目的接口文档
Bearer ${store.getters.token}：这是我们传递给服务器的token，加Bearer 是因为本代码块的项目服务器的需要，详细看自己项目的接口文档对token有没有格式要求

一.前端tob项目登录权限业务流程及请求拦截器注入token

登录权限业务流程

请求拦截器注入token