新建 feature/layout分支，在其分支进行操作

1.主页路由拦截处理-src/permission.js是专门处理路由权限的---全局前置守卫

虽然我们已经完成了登录的过程，并且存储了token，但是此时主页并没有因为token的有无而被控制访问权限，如何解决？此时vuex没有token，却可以访问主页免登录操作？用户有token情况下，访问登录页，想要登录，直接登录白名单：用户不需要token就可以访问的页面

1.1全局前置守位

路由守卫的学习：juejin.cn/post/712652…

本质上就是为了保护访问路由的访问权限,也就是对路由权限进行控制。只有在允许特定的情况下才能访问某个固定的路由,具备查看某些页面的权限,比如:未登录系统之前,禁止直接访问用户个人中心等全局前置守卫,初始化时执行,每次路由切换前执行。

为了更好的体验，可以加入加载状态，项目中已经安装了包，直接在路由守卫界面引入使用

流程：1.处理token 2.引入状态管理

2.样式修改

因为我们后期没有二级菜单，所以这里暂时不用对二级菜单的样式进行控制，后期再去调整

2.1主页左侧导航样式

图片样式复习：

设置左侧导航背景图片
控制logo显示隐藏---默认为false

2.2头部布局和样式-svg的学习

juejin.cn/post/711898…

将原先的黑色设为白色

可以通过控制全局组件的svg属性

3.渲染用户资料

3.1统一注入token---请求拦截器---获取用户资料接口

虽然我们完成了头部菜单的基本布局，但是用户的头像和名称的数据是写死的，我们需要通过接口调用的方式获取当前用户的资料信息

headers中的Authorization相当于我们开门（调用接口）时钥匙(token) ，我们在打开任何带安全权限的门的时候都需要钥匙(token)。而每一次都携带操作有些麻烦，所以统一在axios拦截器中统一注入token

统一注入token src/utils/request.js

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

用户资料可能会出现在各个组件，将其放入vux中，方便后续使用。流程：

初始化state state

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

设置和删除用户资料 mutations

// 设置用户信息
  setUserInfo(state, userInfo) {
    // state.userInfo = userInfo // 可以做到响应式
    state.userInfo = { ...userInfo } //  可以做到响应式
    // { ...userInfo } 和 userInfo 是不同的两个对象， 他们本质指向的地址是不一致的
    // 但是直接赋值的话 state.userInfo 和 userInfo 本质指向的地址是一致的
    // 如果 userInfo 的这个对象在给别人 就导致了Vuex.state.user.userInfo 和 外界的值 就执向同一个了
    
    // 彻底 解决这个问题 深拷贝
  },

建立用户名的映射 src/store/getters.js 我们将所有的资料设置到了userInfo这个对象中，如果想要取其中一个值，我们还可以在getters中建立相应的映射（因为我们要做映射，如果初始值为null，一旦引用了getters，就会报错）

用户资料的action => mutation => state => getters 都设置好了，那么我们应该在什么位置来调用这个action呢？

3.3权限拦截处调用获取资料action

用户资料有个硬性要求，**必须有token**才可以获取，那么我们就可以在确定有token的位置去获取用户资料 调用action src/permission.js

token如果失效了，删除相关信息，并重新登录

此时vuex中有相关数据

最后将头部菜单中的名称换成真实的用户名即可----vuex的使用

3.4获取头像接口合并数据

头像并不在接口的返回体中，我们可以通过另一个接口来获取头像，并把头像合并到当前的头像中接口：获取员工基本信息[]

接口书写：调用接口这个接口需要用户的userId，在前一个接口处，我们已经获取到了，所以可以直接在后面的内容去衔接

3.5自定义指令-解决异常图片情况

通过设置，用户名已经显示，头像依然没有显示，这是因为虽然有地址，但是地址来源是私有云，目前已经失效，所以需要额外处理下图片的异常

3.5.1自定义指令复习（inserted--dom---options）---统一放到一个文件内方便管理

Vue.directive('指令名称', {
    // 会在当前指令作用的dom元素 插入之后执行
    // options 里面是指令的表达式
    inserted: function (dom,options) {
        
    }
})

新建处理图片的自定义指令：

3.5.2自定义指令全局注册---全部导入juejin.cn/post/707780…

import * as 变量 得到的是一个对象**{ 变量1：对象1，变量2：对象2 ... }**, 所以可以采用对象遍历的方法进行处理----方便使用，无需一一去注册了

Object.keys() 方法会返回一个由一个给定对象的自身可枚举属性组成的数组，数组中属性名的排列顺序和正常循环遍历该对象时返回的顺序一致

自定义指令的注册，Vue提供的directive方法来注册全局的自定义指令，该方法接收两个参数：指令名称、包含指令钩子函数的对象juejin.cn/post/707780…

全局注册完后就可以进行使用啦：

4.实现登出功能

登出功能，我们在vuex中的用户模块中实现对应的action------>组件调用---->

  async logout() {
      await this.$store.dispatch('user/logout') // 这里不论写不写 await 登出方法都是同步的
      this.$router.push(`/login`) // 跳到登录
  }

**注意**我们这里也可以采用vuex中的模块化引入辅助函数

import { mapGetters, createNamespacedHelpers  } from 'vuex'
const {  mapActions } = createNamespacedHelpers('user') // 这是的mapAction直接对应模块下的action辅助函数
  methods: {
   // ...mapActions(['logout']),
    ...mapActions({
      logout11: 'logout'
      // key: 你起的别名
      // value: Vuex 里 action 里的名称
    }),
  }