目录
[1. token的介绍和权限访问控制](#1. token的介绍和权限访问控制)
[1.1. token的概念](#1.1. token的概念)
[1.2. token的创建](#1.2. token的创建)
[1.3. token的作用](#1.3. token的作用)
[2. token的使用](#2. token的使用)
[2.1. 目的](#2.1. 目的)
[2.2. 步骤](#2.2. 步骤)
[2.3. 注意](#2.3. 注意)
[3. 通过token 获取个人资料](#3. 通过token 获取个人资料)
[3.1. 语法](#3.1. 语法)
[3.2. 问题](#3.2. 问题)
[3.3. 解决](#3.3. 解决)
[4. axios请求拦截器](#4. axios请求拦截器)
[4.1. axios 请求拦截器介绍](#4.1. axios 请求拦截器介绍)
[4.2. axios 请求拦截器,什么时候使用?](#4.2. axios 请求拦截器,什么时候使用?)
[5. axios响应拦截器](#5. axios响应拦截器)
[5.1. axios 响应拦截器介绍](#5.1. axios 响应拦截器介绍)
[5.2. axios 响应拦截器,什么时候触发成功/失败的回调函数?](#5.2. axios 响应拦截器,什么时候触发成功/失败的回调函数?)
1. token的介绍和权限访问控制
1.1. token的概念
- 访问权限的令牌,本质上是一串字符串

1.2. token的创建
- 正确登录后,由后端签发并返回
1.3. token的作用
- 判断是否有登录状态等,控制访问权限

2. token的使用
2.1. 目的
- 只有登录状态,才可以访问内容页面
2.2. 步骤
- 在 utils/auth.js 中判断无 token 令牌字符串,则强制跳转到登录页

- 在登录成功后,保存 token 令牌字符串到本地,再跳转到首页
2.3. 注意
- 前端只能判断 token 的有无
- 后端通过解密可以提取 token 字符串的原始信息,判断有效性
3. 通过token 获取个人资料

3.1. 语法
- axios 可以在 headers 选项传递请求头参数

3.2. 问题
- 很多页面,都需要获取访问权限
- 很多接口,都需要携带 token 令牌字符串
3.3. 解决
- 在请求拦截器统一设置公共 headers 选项
4. axios请求拦截器
4.1. axios 请求拦截器介绍
- 发起请求之前,触发的配置函数,对请求参数进行额外配置

4.2. axios 请求拦截器,什么时候使用?
- 有公共配置和设置时,统一设置在请求拦截器中
5. axios响应拦截器
5.1. axios 响应拦截器介绍
- 响应回到 then/catch 之前,触发的拦截函数,对响应结果统一处理
例如:身份验证失败,统一判断并做处理


5.2. axios 响应拦截器,什么时候触发成功/失败的回调函数?
- 状态为 2xx 触发成功回调,其他则触发失败的回调函数