vue axios 刷新token 刷新jwt js刷新token http刷新token

前言 在互联网的登陆系统中一般有session cookie 和 jwt token来进行验证用户是否登录的.下面来说一下关于 jwt的坑:

1.首先登录成功的返回,其中jwt的有效期为2小时,refreshJwt的有效期为30天如下:

2.保存jwt 和refreshJwt 在cookie中,当然这里不一定要保存在cookie中,也可以保存在别的地方.这里以cookie为例子:

 3.核心思路:当jwt过期时(超过了2小时),调用后端接口会返回401的状态码(这个时候代表jwt已经过期了,需要刷新了),再拦截器中拦截响应的数据,这个时候就需要拿refreshJwt去调用后端的刷新接口,把获取到的最新jwt覆盖掉本地的jwt和refreshJwt,然后再次进行刚才的请求,并且把获取到的数据,从响应拦截器中返回回去.

步骤大概如此: 前端发起ajax请求 => 后端发现jwt已经过期,返回401状态码 => 前端拦截响应数据,并发起刷新token的请求 => 拿到最新的jwt和refresh,保存到本地 => 拿到最新的jwt去进行刚刚未请求成功的接口 => 获取到刚刚请求的结果,覆盖第一次请求失败(状态码为401)的响应数据 => 返回第二次请求的结果.   

另一种情况就是:前端发起ajax请求 => 后端发现jwt已经过期,返回401状态码 => 前端拦截响应数据,并发起刷新token的请求 =>后端返回了410的状态码(这个时候代表refreshJwt也过期了,需要进行重新登录了) => 真正的过期了,需要跳转到登录界面.  

这样刷新token是在用户无感的情况下进行操作的.

下面进行贴代码了:

此拦截器模块为http,封装的步骤参考:https://blog.csdn.net/qq_33270001/article/details/86612528  注:原来的http模块中并未封装refreshJwt的操作.

3. 新建一个refreshToken.js的文件:

看核心操作就是,util.getCookie(`REFRESHJWT-COLLECTOR`); 这些都是封装来操作cookie的工具.无需重点关注

import axios from 'axios';
import conf from '@config';
import util from '@util';
import { BASE_URL, API_SERVER_FILTER } from './models/types';
export default async() => {
    try {
        const refreshToken = util.getCookie(conf.REFRESH_AUTHTOKEN_STORE_KEY);
        const { data } = await axios.post(`${BASE_URL}${API_SERVER_FILTER}/user/reftoken`, {
            token: util.getCookie(conf.AUTHTOKEN_STORE_KEY),
            platform: 'PC',
            refToken: refreshToken
        });
        const { code, data: { token, refToken } } = data || {};
        if (token && refToken) {
            util.setCookie(conf.AUTHTOKEN_STORE_KEY, token); //jwt
            util.setCookie(conf.REFRESH_AUTHTOKEN_STORE_KEY, refToken); //刷新token
        }
        return { code, data: { token } };
    } catch (error) {
        console.log(error);
    }
};

4. 拦截器配置如下:

 

/***
 * Created by Simple on 2018/1/14 0014.
 * Http请求控制器模块
 */

import http from 'axios';
import { Loading, Message } from 'element-ui';
import router from '@/router';
import conf from '@config';
import util from '@util';
import refreshToken from './refreshToken';
const instance = http.create();
// instance 配置
instance.defaults.timeout = 1000 * 30;
instance.defaults.baseURL = process.env.NODE_ENV === 'production' ? conf.productionUrl : conf.devUrl;
instance.setToken = (token) => {
    instance.defaults.headers.Authorization = token;
    util.setCookie(conf.AUTHTOKEN_STORE_KEY, token); //jwt
}

// 配置通用请求动画
let loading = null;
// 是否正在刷新的标记
let isRefreshing = false;
// 重试队列，每一项将是一个待执行的函数形式
let requests = [];

/**
 * 通用请求拦截配置
 * @param {*} config
 */
const instanceConf = (config) => {
    //===========================签名 S=====================================
   const { noncestr, timestamp, sign } = util.getSign(config);
    config.headers.noncestr = noncestr;
    config.headers.timestamp = timestamp;
    config.headers.sign = sign;
    //===========================签名 E=====================================
    config.headers.platform = `PC`;
    //===========================移除重置空字符串 S=====================================
    util.resetParamsEmpty(config);
    //===========================移除重置空字符串 E=====================================
    config.headers.Authorization = util.getCookie(conf.AUTHTOKEN_STORE_KEY);
    if (config.url.indexOf('/user/gqrcstatus') == -1) {
        loading = Loading.service({
            lock: true,
            text: '拼命加载中...',
            background: 'rgba(255, 255, 255, .8)',
        });
    }
    return config;
}

instance.interceptors.request.use(instanceConf, err => {
    if (loading && err) loading.close();
    return Promise.reject(err);
});

// http response 拦截器
instance.interceptors.response.use(async (response) => {
    let data = {};
    if (response && response.data) {
        let code = Number(response.code || response.data.code)
        data = response.data;
        if (code === 200) {
            data = response.data;
        }else if(code == 402){
            if(!isRefreshing){
                isRefreshing = true;
                try {
                    const { data: { token } } = await refreshToken();
                    if(token){
                        instance.setToken(token);
                        response.config.headers.Authorization = token;
                        // 已经刷新了token，将所有队列中的请求进行重试
                        requests.forEach(cb => cb(token));
                        requests = [];
                        return instance(instanceConf(response.config));
                    }
                } catch (error) {   //刷新时候直接判断token 不用判断code
                    console.error('refreshtoken error =>', error);
                    routerRedirect({ redirect: router.currentRoute.fullPath });
                } finally {
                    isRefreshing = false;
                }
            }else{
                // 正在刷新token，将返回一个未执行resolve的promise
                return new Promise((resolve) => {
                    // 将resolve放进队列，用一个函数形式来保存，等token刷新后直接执行
                    requests.push((token) => {
                        response.config.headers.Authorization = token;
                        resolve(instance(instanceConf(response.config)));
                    });
                });
            }
        }  else if (code === 401) {
            routerRedirect({ redirect: router.currentRoute.fullPath });
        } else if(![30073,30072,30074,30078,30075,30076].includes(code)) {
            Message.error(response.data && response.data.message || '网络连接出错!请稍后刷新重试!');
        }
    }
    if (loading) loading.close();
    return data;
}, (error) => {
    console.log(`object`, error);
    if (loading) loading.close();
    Message.error('哎呀~ (ಥ﹏ಥ)网络又开小差了,请稍后刷新重试!');
    return Promise.reject(error.response.data);
});

/**
 * 重定向
 */
const routerRedirect = ({ path = '/login', redirect })=>{
    Message.warning(`身份过期，请重新登录!`);
    if (router.currentRoute.path != '/login') {
        setTimeout(() => {
            router.replace({ path, query: { redirect } });
        }, 1200);
    }
}

export default instance;

5.  操作演示:

已经过期了,需要进行刷新操作

进行刷新覆盖操作 

 

重新进行请求,并覆盖掉原来的

大功告成,小生的刷新token思路如此,如阁下有更好的思路,方便分享,请留言哦,刷新token已经可以了.有问题的小伙伴请求留言.

以前写了一篇发现在并发处理的时候有问题:

然后参考了一部分资料修改了代码,完美解决.

参考资料:

https://segmentfault.com/a/1190000020986592