Vue 人资 实战篇三 主页模块 token拦截、token注入、pvg的颜色、权限拦截器、自定义指令、Token失效

1.0 主页的token拦截处理

目标：根据token处理主页的访问权限问题
本节任务：完成主页中根据有无token，进行页面访问的处理

1.1 权限拦截的流程图 以及 流程图转化代码

我们已经完成了登录的过程，并且存储了token，但是此时主页并没有因为token的有无而被控制访问权限
在基础框架阶段，我们已经知道**src/permission.js**是专门处理路由权限的，所以我们在这里处理
在导航守卫的位置，我们添加了NProgress的插件，可以完成进入时的进度条效果

提交代码

// 权限拦截 导航守卫 路由守卫  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('/') // 跳到主页
    } else {
   
      next() // 直接放行
    }
  } else {
   
    // 如果没有token
    if (whiteList.indexOf(to.path) > -1) {
   
      // 如果找到了 表示在在名单里面
      next()
    } else {
   
      next('/login') // 跳到登录页
    }
  }
  NProgress.done() // 手动强制关闭一次  为了解决 手动切换地址时  进度条的不关闭的问题
})
// 后置守卫
router.afterEach(function() {
   
  NProgress.done() // 关闭进度条
})

2.0 主页的左侧导航样式

目标：设置左侧的导航样式
注意：在scss中，如果我们想要使用@别名，需要在前面加上一个~才可以

1. 主页的布局组件位置**`src/layout
2. 左侧导航组件的样式文件**`styles/siderbar.scss
3. 显示左侧logo图片** src/setttings.js
4. 设置头部图片结构** src/layout/components/Sidebar/Logo.vue

3.0 设置头部内容的布局和样式

目标：设置头部内容的布局和样式

1. 头部组件位置： layout/components/Navbar.vue
2. 汉堡组件图标颜色 src/components/Hamburger/index.vue
   注意：这里的图标我们使用了svg，设置颜色需要使用svg标签的fill属性

4.0 获取用户资料接口和token注入

目标： 封装获取用户资料的资料信息
本节任务： 完成获取用户资料接口和token注入

4.1 获取用户资料接口

1. 在**src/api/user.js**中封装获取用户资料的方法

/**
 *  获取用户的基本资料
 *
 * **/
export function getUserInfo() {
   
  return request({
   
    url: '/sys/profile',
    method: 'post'
  })
}

2. headers中的Authorization相当于我们开门（调用接口）时**钥匙(token)**，我们在打开任何带安全权限的门的时候都需要
3. 每次在接口中携带钥匙（token）很麻烦，所以我们可以在 axios拦截器 中统一注入token （src/utils/request.js）

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)
}) 

5.0 封装获取用户资料的action并共享用户状态

目标： 在用户的vuex模块中封装获取用户资料的action，并设置相关状态
本节任务：封装获取用户资料的action并共享用户状态

1. 封装获取用户资料action action src/store/modules/user.js