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);码片
相关推荐
夫琅禾费米线1 分钟前
JavaScript 中的 Generator 函数及其方法
开发语言·前端·javascript
Traced back3 分钟前
pinia的使用
前端
@小博的博客8 分钟前
C++初阶学习 第十二弹——stack与queue的介绍和使用
开发语言·数据结构·c++·学习
世界和平�����20 分钟前
vue3 命名式(函数式)弹窗
前端·javascript·vue.js
所遇所思30 分钟前
vue项目中中怎么获取环境变量
前端·javascript·vue.js
ljklxlj42 分钟前
webview4/edgewebbrower学习记录——执行js
前端·javascript·学习
潜龙在渊灬44 分钟前
纯CSS实现无限轮播banner,这道题你解出来了吗?
前端·css·程序员
出逃日志1 小时前
前端框架Vue3的响应式数据,v-on,v-if,v-for,v-bind
前端·vue.js·前端框架
techdashen1 小时前
Go与黑客(第四部分)
开发语言·后端·golang
宇宙大豹发1 小时前
【Python】爬虫实战:高效爬取电影网站信息指南(涵盖了诸多学习内容)
开发语言·爬虫·python·学习·python爬虫·python代码·python使用