「这是我参与2022首次更文挑战的第4天，活动详情查看：2022首次更文挑战」。

前言：

掘金新人一枚，黑马学习大事件项目每日总结，CSS篇幅过长未展示代码

[项目演示地址]www.escook.cn:8086/ev/#/login)

今日内容

-配置响应拦截器，简化请求
-首页侧边栏渲染

在项目入口文件 main.js 中，配置 axios 的请求拦截器：

    // 定义请求拦截器
    axios.interceptors.request.use(function (config) {
      // 为请求头挂载 Authorization 字段
      if (config.url.startsWith('/my')) {
        config.headers.Authorization = store.state.token
      }
      return config
    }, function (error) {
      return Promise.reject(error)
    })

渲染用户信息

在 src/store/user.js 模块中，使用 axios + action 获取用户的基本信息：

export default {
  namespaced: true,
  state: () => ({
    userInfo: {}
  }),
  mutations: {
    updateUserInfo (state, info) {
      state.userInfo = info
    }
  },
  actions: {
    async initUserInfo (ctx) {
      const { data: res } = await axios.get('/my/userinfo')
      if (res.code === 0) {
        ctx.commit('updateUserInfo', res.data)
      }
    }
  }
}

在 Main.vue 组件的 created 生命周期函数中，调用 Vuex 中的 initUserInfo 函数，获取用户的基本信息：

created() {
  this.$store.dispatch('user/initUserInfo')
},

在 Main.vue 组件中，基于 mapState 辅助函数，把 Vuex 中的 userInfo 数据映射到当前组件中使用：

import { mapState } from 'vuex'

export default {
  computed: {
    ...mapState('user',['userInfo'])
  }
}

在 Main.vue 组件的左侧边栏，渲染用户信息区域：

<!-- 顶部的用户头像 -->
<template slot="title">
  <!-- 头像 -->
  <img :src="userInfo.user_pic" alt="" class="avatar" v-if="userInfo.user_pic" />
  <img src="../../assets/logo.png" alt="" class="avatar" v-else />
  <span>个人中心</span>
</template>

<!-- 左侧边栏的用户信息 -->
<el-aside width="200px">
  <div class="user-box">
    <img :src="userInfo.user_pic" alt="" v-if="userInfo.user_pic" />
    <img src="../../assets/logo.png" alt="" v-else />
    <span>欢迎 {{ userInfo.nickname || userInfo.username }}</span>
  </div>
</el-aside>

左侧边栏的菜单功能

渲染左侧边栏的基础布局

1. 在 Main.vue 组件的 el-aside 组件下，定义左侧菜单的 UI 布局结构：

<el-menu
  default-active="1"
  class="el-menu-vertical-demo"
  background-color="#23262E"
  text-color="#fff"
  active-text-color="#409EFF"
  unique-opened
>
  <!-- 不包含子菜单的“一级菜单” -->
  <el-menu-item index="1"><i class="el-icon-s-tools"></i>一级菜单</el-menu-item>
  <!-- 包含子菜单的“一级菜单” -->
  <el-submenu index="2">
    <template slot="title">
      <i class="el-icon-s-tools"></i>
      <span>一级菜单</span>
    </template>
    <el-menu-item index="2-1"><i class="el-icon-star-on"></i>二级菜单</el-menu-item>
    <el-menu-item index="2-2"><i class="el-icon-star-on"></i>二级菜单</el-menu-item>
    <el-menu-item index="2-3"><i class="el-icon-star-on"></i>二级菜单</el-menu-item>
  </el-submenu>
</el-menu>

2. 在 Main.vue 组件的 methods 中，定义 initMenus 函数：

initMenus () {
      return this.$http.get('/my/menus').then(({ data: res }) => {
        if (!res) return
        // 判断状态
        if (res.code !== 0) return
        // 将数据存储到 data 中
        // console.log(res)
        this.menus = res.data
      })
    }

3.在 main.vue 组件的 created 生命周期函数中调用 initMenus 函数

    created () {
        this.initMenus()
    },

4.打印 menus

5.循环渲染左侧一级，二级菜单

<template v-for="item in menus">
  <!-- 不包含子菜单的“一级菜单” -->
  <el-menu-item :index="item.indexPath" :key="item.indexPath" v-if="!item.children">
    <i :class="item.icon"></i>{{ item.title }}
  </el-menu-item>
  <!-- 包含子菜单的“一级菜单” -->
  <el-submenu :index="item.indexPath" :key="item.indexPath" v-else>
    <template slot="title">
      <i :class="item.icon"></i>
      <span>{{ item.title }}</span>
    </template>
    <!-- 循环渲染“二级菜单” -->
    <el-menu-item :index="subItem.indexPath" v-for="subItem in item.children" :key="subItem.indexPath">
      <i :class="subItem.icon"></i>{{ subItem.title }}
    </el-menu-item>
  </el-submenu>
</template>

左侧菜单优化

1.修改 el-menu 组件的 default-active 属性，可以设置默认激活的左侧菜单 2.为 el-menu 组件添加 router 属性，可以开启左侧菜单的路由模式：

<el-menu
    default-active="/home"
    class="el-menu-vertical-demo"
    background-color="#23262E"
    text-color="#fff"
    active-text-color="#409EFF"
    unique-opened
    router
   ></el-menu>

下一章节功能实现

• 优化身份认证过程
• 基于路由渲染用户信息组件