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);码片