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

前言：

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

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

今日内容

• token 本地化储存
• 首页初步搭建

token 本地化储存

上章在登录后，将 token 存入 vuex 中

1. 在 src/store/user.js 中，定义 token 数据，以及更新 token 的 updateToken mutation 函数：

因为在本次项目中，许多功能在发送请求时需要携带 token 认证，所以将 token 存入 vuex 中，方便数据的使用。

    import axios from 'axios'
    
    export default ({
      namespaced: true,
      state: () => ({
        token: '',
        userInfo: {}
      }),
      modules: {},
      mutations: {
        updateToken (state, token) {
          state.token = token
        }
      }
    })

2. 在 src/store/index.js 中导入 user 模块

    // 引入 user 模块
    import user from './user'
    
    export default new Vuex.Store({
      plugins: [createPersistedState()],
      state: {
      },
      mutations: {
    
      },
      actions: {
      },
      modules: {
        // 导入模块
        user
      }
    })

3. 在 Login.vue 组件中，登录成功之后，调用 vuex 中的 updateToken 函数：

// 把 token 记录到 vuex 中
this.$store.commit('updateToken', res.token)

持久化存储 vuex 中的数据

持久化存储 token一般使用 localStorage 但是在这里我们使用 vuex-persistedstate 持久化储存第三方包

1. 运行如下的命令，安装持久化存储 vuex 中数据的第三方包：

     npm install --save vuex-persistedstate@3.2.1

2. 在 src/store/index.js 模块中，导入并配置 vuex-persistedstate 包：

    // 1. 导入包
    import createPersistedState from 'vuex-persistedstate'
 
    export default new Vuex.Store({
      // 2. 配置为 vuex 的插件
      plugins: [createPersistedState()], 
})

登录成功后跳转到后台主页

主页初步搭建

1. 在 Login.vue 组件中，登录成功时，通过编程式导航 API，跳转到后台主页

   //登录成功之后，跳转到后台主页
    this.$router.push('/')

2. 在 src/views 目录下，新建 Main/Main.vue 后台主页组件

<template>
  <el-container class="main-container">
    <!-- 头部区域 -->
    <el-header>
      <!-- 左侧的 logo -->
      <img src="../../assets/images/logo.png" alt="" />
      <!-- 右侧的菜单 -->
      <el-menu
        class="el-menu-top"
        mode="horizontal"
        background-color="#23262E"
        text-color="#fff"
        active-text-color="#409EFF"
      >
        <el-submenu index="1">
          <template slot="title">
            <!-- 头像 -->
            <img src="../../assets/logo.png" alt="" class="avatar" />
            <span>个人中心</span>
          </template>
          <el-menu-item index="1-1"><i class="el-icon-s-operation"></i>基本资料</el-menu-item>
          <el-menu-item index="1-2"><i class="el-icon-camera"></i>更换头像</el-menu-item>
          <el-menu-item index="1-3"><i class="el-icon-key"></i>重置密码</el-menu-item>
        </el-submenu>
        <el-menu-item index="2"><i class="el-icon-switch-button"></i>退出</el-menu-item>
      </el-menu>
    </el-header>
    <el-container>
      <!-- 侧边栏区域 -->
      <el-aside width="200px">Aside</el-aside>
      <el-container>
        <!-- 页面主体区域 -->
        <el-main>
          Main.vue后台主页
        </el-main>
        <!-- 底部 footer 区域 -->
        <el-footer>© www.itheima.com - 黑马程序员</el-footer>
      </el-container>
    </el-container>
  </el-container>
</template>

退出主页功能

1.用户点击右上角退出首页。

注意，用户退出时需要清空 token 认证

绑定事件

    <el-menu-item index="2" @click="logoutHandler">
        <i class="el-icon-switch-button"></i> 退出
    </el-menu-item>

2. 退出提示用户

logoutHandler () {
      this.$confirm('确定退出吗', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          this.$message({
            type: 'success',
            message: '退出成功!'
          })
        })
        .catch((e) => e)

3. Element-ui 中 MessageBox 弹框组件（以下引用官网）：

调用$confirm方法即可打开消息提示，传入options作为第三个参数，它是一个字面量对象。type字段表明消息类型，可以为success，error，info和warning，无效的设置将会被忽略。注意，第二个参数title必须定义为String类型，如果是Object，会被理解为options。在这里用了 Promise 来处理后续响应。

logoutHandler () {
      this.$confirm('确定退出吗', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          // [消息提示组件]（https://element.eleme.cn/#/zh-CN/component/message）

           // TODO：执行退出登录的操作

        })
        .catch((e) => e)

4. 清空 token，跳转至登录页

TODO 注释处写入退出成功时执行的函数

      this.$message({
         type: 'success',
         message: '退出成功!'
        // 1. 清空 token
      this.$store.commit('updateToken', '')
        // 2. 跳转到登录页面
      this.$router.push('/login')
      })

同时提示用户退出成功 Element-ui 消息提示组件

---

下一章节功能实现

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