axios详解

1 axios 常规进行哪些配置封装

①首先创建一个Axios实例,在baseURL配置基础URL,并且可以根据不同的环境变量(.env文件)来进行设置

②调用Axios实例上的interceptors.request.use实现请求拦截,在请求拦截中判断一下用户是否在localstorage里存在token(登录时存储token),如果存在就添加到请求头里,如果不存在,则直接返回, 也可以对请求参数进行序列化操作( 使用 QS ,前提是有些服务判断要求的情况下)

③调用Axios实例上的interceptors.response.use实现响应拦截,在这里可以通过状态码来处理逻辑,如果是401,则表示token过期,这时候就要重定向到登录页面,如果是403,则表示该接口不存在,同样跳转到登录页。 除此以外 还可以进行一些统一的错误处理,如果全局拦截错读的响应码进行message提示等等。

其他可以进行的配置:https://www.yuque.com/wangwangwang-7cxiu/123456/vgeqqoqie44ptzaz
2 如何按指定次数重连

在拦截的错误err中解构出config,通过设置config.retry重连的最高次数,设置config.retryCount为已经重连的次数,然后判断config.retryCount是否大于等于config.retry的次数,大于则停止请求,否则config.retryCount重连次数加1

https://www.npmjs.com/package/axios-retry
3 当前页面请求还没有返回结果,已经离开关闭了当前页面怎么处理

使用 Axios 提供的取消请求的功能,以确保在离开页面时取消尚未完成的请求。这可以通过 Axios 的 CancelToken 来实现,在组件销毁前执行cancel
4 如何主动的中断请求

cancelToken是axios用来取消请求的API

创建一个CancelToken实例对象

const source = axios.CancelToken.source();

将CancelToken与请求配置一起传递

通过source.token获取token 赋值给请求配置的cancelToken属性

在需要中断请求的地方,调用cancel方法

source.cancel()
5 token和双token(jwt 当中的token和refreshToken)

登录操作,在后台服务器验证账号密码成功之后返回2个token:accessToken和refreshToken。

在进行服务器请求的时候,先将Token发送验证,如果accessToken有效,则正常返回请求结果;如果accessToken无效,则验证refreshToken。

此时如果refreshToken有效则返回请求结果和新的accessToken和新的refreshToken。如果refreshToken无效,则提示用户进行重新登陆操作。

在这里插入代const jwt = require('jsonwebtoken');
const secretKey = 'secret';   // access token密钥
const refreshSecret = 'refreshSecret'; // refresh token密钥

function getAccessToken(req, res) {
    let { username, password } = req.body;   // 获取登录表单数据
    if (username && password) {             // 校验用户名和密码
        let accessToken = jwt.sign({ username }, secretKey, { expiresIn: '30m' });    // 生成30分钟过期access token
        let refreshToken = jwt.sign({ username }, refreshSecret);         // 生成无过期refresh token
        res.json({         // 返回access token和refresh token
            status: 'ok',
            accessToken,
            refreshToken
        })
    } else {
        res.json({
            status: 'error',
            message: '用户名或密码不能为空!'   // 登录表单校验失败,返回错误信息
        })
    }
}

function refreshToken(req, res) {    // refresh接口
    let { refreshToken } = req.body;   // 获取refresh token
    if (refreshToken) {                // 校验refresh token
        let decoded = jwt.verify(refreshToken, refreshSecret);
        // 验证refresh token
        let accessToken = jwt.sign({ username: decoded.username }, secretKey, { expiresIn: '30m' });
        // 生成新的30分钟access token  
        res.json({
                status: 'ok',
                accessToken    // 返回新的access token
        })
    } else {
        res.json({
            status: 'error',
            message: '刷新令牌不能为空!'   // refresh token校验失败,返回错误信息
        })
    }
}

app.post('/login', getAccessToken);   // 登录接口,获取token
app.post('/refresh', refreshToken);码片
相关推荐
q5673152320 分钟前
在 Bash 中获取 Python 模块变量列
开发语言·python·bash
阿伟来咯~30 分钟前
记录学习react的一些内容
javascript·学习·react.js
吕彬-前端35 分钟前
使用vite+react+ts+Ant Design开发后台管理项目(五)
前端·javascript·react.js
学前端的小朱38 分钟前
Redux的简介及其在React中的应用
前端·javascript·react.js·redux·store
许野平1 小时前
Rust: 利用 chrono 库实现日期和字符串互相转换
开发语言·后端·rust·字符串·转换·日期·chrono
guai_guai_guai1 小时前
uniapp
前端·javascript·vue.js·uni-app
也无晴也无风雨1 小时前
在JS中, 0 == [0] 吗
开发语言·javascript
狂奔solar1 小时前
yelp数据集上识别潜在的热门商家
开发语言·python
blammmp2 小时前
Java:数据结构-枚举
java·开发语言·数据结构
bysking2 小时前
【前端-组件】定义行分组的表格表单实现-bysking
前端·react.js