axios封装和token刷新后refresh_token请求的问题

最新推荐文章于 2024-08-18 16:39:00 发布

JiaLin_Denny

最新推荐文章于 2024-08-18 16:39:00 发布

阅读量1.4k

点赞数

分类专栏： axios token 文章标签： axios token刷新 axios封装

本文链接：https://blog.csdn.net/hopefullman/article/details/121793386

版权

本文介绍了在React项目中如何封装axios，实现token和refresh_token的管理。当token过期时，利用refresh_token进行自动刷新，并在响应拦截器中处理各种情况。文中还展示了util.js中的关键代码段。

摘要由CSDN通过智能技术生成

1.先说下我的需求：

1.1 为了方便以后管理axios，我封转了下一层axios，并把它叫做util。至于后面的一些具体的请求，我并没有封装成类似action函数或者对象。（因为懒，就先把axios对象搞了一层封装仅此而已）

1.2 登陆成功后获取到token和refresh_token，其中token有效时间是两个小时，refresh_token永久有效。token过期后需要用refresh_token重新请求，获取一个新的token和refresh_token。同时根据情况把token加在了config里面，避免后面每次只要请求就传token参数。

1.3 技术栈主体是react

2.下面开始代码 util.js中

最顶层包的使用

import axios from 'axios';
import {ConfigUrl} from '../page/ConfigUrl/ConfigUrl.js';
import { Router,BrowserRouter } from 'react-router-dom';
import {message} from 'antd';
let baseUrl='https://api.xxxxxxxxx.com';
let util = axios.create({
  timeout: 3000,
  baseUrl: baseUrl
});
// 登陆成功后获取缓存练的access_token 、refresh_token
let access_token=sessionStorage.getItem('access_token');