（三）黑马React（封装axioas/用户登录RTK/Token持久化/表单提交）

---

---

项目地址

• 教程作者：
• 教程地址：

• 代码仓库地址：

• 所用到的框架和插件：

dbt 
airflow

一、用户登录和Token

1.1 axios基础封装

• 最基础的封装：
  1. 封装根域名，baseUrl
  2. 请求拦截器封装
  3. 响应拦截器封装

1. 封装根域名

2. 请求和响应拦截器

request拦截器

• 将token添加到请求头里 以：Authorization: Bearer token的形式
  

3. 统一导出

• 统一导出utils里所有axios相关的方法
  

1.2 RTX管理token

• token需要在很多地方使用，所以使用RTK进行管理
  

1. user.js用户登录reducers

2. index.js统一导出reducers

• reducer里的key和value是：user.js里的name和export的名称
  

3. 在文件总入口应用store

• 添加provider
  

4. 组件里使用异步RTK

• 组件里使用user.js里提供的异步方法：
  1. 导入dispatch组件 const dispatch = useDispatch()
  2. 通过dispatch调用异步方法
  3. 成功后跳转

6. token持久化

• 在获取到token之后，在redux里存一份，在localStorage里存一份，如果下次在请求的时候，先看看是否localStorage里是否有，有的化，则直接拿，没有就重新请求<