# vue-ev-73

**Repository Path**: leetc/vue-ev-73

## Basic Information

- **Project Name**: vue-ev-73
- **Description**: 这是一个大事件项目, 非常厉害!
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 6
- **Forks**: 0
- **Created**: 2022-04-20
- **Last Updated**: 2023-02-17

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 大事件项目纪要

## 登录

### 退出登录

1. 先去官网找到合适的组件 (MessageBox)
2. 当用户点击退出登录时, 使用 this.$confirm 进行弹框提醒
   - 当用户点击确认按钮执行 .then 回调的代码
   - 当用户点击取消按钮执行 .catch 回调的代码
3. 当用户点击确认时, 执行退出登录的逻辑
   1. 清除 Vuex 中的 token
   2. 提醒用户退出登录成功
   3. 跳转至登录页
4. 用户点击取消时不做任何处理 (不要删除 .catch 的空代码)



## 主页

### 渲染用户信息

1. 从笔记中复制静态页面
2. 确定数据存储到 vuex 中, 所以需要在 vuex 中定义数据
3. 定义 actions 在其中使用 axios 发请求 (不能使用 this.$http)
4. 定义 mutations 将数据存储到 state
5. 在组件中渲染数据



### 渲染侧边菜单

1. 根据官网学习 el-menu 组件 (自己动手写一个静态的侧边栏), 掌握核心属性:

   default-active

   index

2. 后台管理系统的菜单栏都是动态渲染的, 所以需要发请求获取数据

3. 数据获取后存入 Main.vue 的 data 中

4. 使用 v-for 循环渲染组件

   - 使用 template 标签包裹
   - 使用 v-if 根据数据的 children 来决定是否渲染 submenu
   - 嵌套循环

### 使用请求拦截器优化身份认证

起因: 后台管理系统每次发请求都需要携带 token , 每次都手写太麻烦了, 可以使用拦截器, 自动为每一次请求添加请求头

1. 去 axios 官网复制请求拦截器的代码
2. 在请求拦截器中添加请求头, 将 token 携带
3. 将获取用户信息 / 菜单列表的请求配置删除



### 使用全局前置守卫拦截未登录

1. 添加全局前置守卫

2. 加入判断条件: 未登录并且访问的不是登录和注册时, 强行跳转至登录页

   ```js
   if (!store.state.user.token && to.path !== '/login' && to.path !== '/reg') {
       // 提醒用户
       Vue.prototype.$message.error('您没登录哦!')
       // 强行跳转到登录页
       return next('/login')
   }
   next()
   ```



### 使用响应拦截器拦截 token 过期

1. 复制相应拦截器的代码

2. 在错误中判断状态码为 401 时强制跳转到登录页

   ```js
   if (error.response.status === 401) {
       // 清空 token
       store.commit('user/updateToken', '')
       // 跳转到登录页
       router.push('/login')
       // 提醒用户
       Vue.prototype.$message.error(error.response.data.message)
   }
   ```

   

## 用户模块

### 基本资料

#### 渲染组件

1. 开启 el-menu 的 router 模式

   开启后会将 index 作为 path 来进行路由跳转

2. 新建组件

3. 配置路由规则进行渲染



### 功能实现

1. 点击重置按钮, 使用表单提供的 `resetFields` 方法重置表单
2. 点击提交修改时
   1. 兜底校验
   2. 发请求
   3. 根据结果提醒用户
   4. 如果修改成功, 重新发请求获取用户信息