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

你可能感兴趣的:(技术分享,前端,javascript,开发语言,node.js)