前端刷新token，判断token是否过期，若没有过期则刷新token，过期则退出登录-Toy模板网

这篇具有很好参考价值的文章主要介绍了前端刷新token，判断token是否过期，若没有过期则刷新token，过期则退出登录。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

所用框架

vue+axios

为什么要刷新token

假设后端设置的token过期时间为10分钟。那么登录以后，过十分钟后token就会过期，这时再去操作系统，所有的请求都不能用，都会报token过期，需要重新登录才能继续操作系统。这样的方式显然是不合理的，为了解决这个问题，就需要在一段时间内刷新token。

实现思路

在请求拦截器里实现token刷新逻辑处理。后端设置的token过期时间为30分钟，我们这里是在token即将过期的时候进行token刷新，而不是已经过期了才去刷新，这里即将过期的时间设置的是10分钟（也就是token使用20分钟后），这个时间在下面代码判断中可以根据自己项目情况自行调整。在当前时间大于设置的即将过期时间时，调用刷新token的接口，重新设置token，并将即将过期时间进行调整。设置即将过期时间是为了避免每个请求都去刷新token，避免频繁修改token。

一般一个页面同时会有很多个请求，所以我们需要建一个数组先缓存起来这些请求；除此之外，还要建一个全局标志，绑在window上，用来判断当前是否正在刷新token；待token刷新完成后，再去执行数组中缓存的所有请求，此时，数组中的请求都是带着刷新后的最新的token值作为headers去请求的。

下面直接上相关代码

import {setTokenOverdueTime} from '../src/api/refreshToken'
localStorage.setItem("tokenOverdueTime", setTokenOverdueTime());

新建一个refreshToken.js文件，文件内容如下：

import Vue from 'vue'

//设置token快过期时间,当前时间+20分钟
export function setTokenOverdueTime() {
    let t = new Date().getTime() + 1200000;
    let d = new Date(t);
    let theMonth = d.getMonth() + 1;
    let theDate = d.getDate();
    let theHours = d.getHours();
    let theMinutes = d.getMinutes();
    if (theMonth < 10) {
        theMonth = '0' + theMonth
    }
    if (theDate < 10) {
        theDate = '0' + theDate
    }
    if (theHours < 10) {
        theHours = '0' + theHours
    }
    if (theMinutes < 10) {
        theMinutes = '0' + theMinutes
    }
    let date = d.getFullYear() + '-' + theMonth + '-' + theDate
    let time = theHours + ':' + theMinutes
    let Spare = date + ' ' + time
    return Spare;
}

// 判断token是否即将过期
function isTokenExpired() {
    let curTime = new Date();
    //获取即将过期时间
    let tokenOverdueTime = localStorage.getItem("tokenOverdueTime");
    // 判断当前时间是否大于即将过期时间
    if (curTime > new Date(tokenOverdueTime)) {
        return true
    }
    return false;
}
// 将所有的请求都push到数组中,其实数组是[function(token){}, function(token){},...]
function cacheRequestArrHandle(cb) {
    cacheRequestArr.push(cb);
}
// 数组中的请求得到新的token之后自执行，用新的token去重新发起请求
function afreshRequest(token) {
    cacheRequestArr.map(cb => cb(token));
    cacheRequestArr = [];
}
//定义一个空数组，用来缓存请求
let cacheRequestArr = [];
// 是否正在刷新的标志
window.isRefreshing = false;
export function isRefreshToken(instance, config, store) {
	// 判断token是否即将过期，且不是请求刷新token的接口
    if(isTokenExpired() && config.url !== '/refreshToken'){
    	// 所有的请求来了，先判断是否正在刷新token，
        // 如果不是，将刷新token标志置为true并请求刷新token.
        // 如果是，则先将请求缓存到数组中
        // 等到刷新完token后再次重新请求之前缓存的请求接口即可
        if (!window.isRefreshing) {
            window.isRefreshing = true;
            instance.get('/refreshToken').then(res => {
                if(res.data.status === 0){
                	// 更新 store和缓存里的值
                    localStorage.setItem("userToken", JSON.stringify(res.data.data));
                    store.dispatch("setUserToken", res.data.data);
                    // 更新即将过期时间
                    localStorage.setItem("tokenOverdueTime", setTokenOverdueTime());
                    // 将刷新的token替代老的token
                    config.headers.token = res.data.data;
                    // 刷新token完成后重新请求之前的请求
                    afreshRequest(res.data.data);
                }
            }).finally(() => {
                window.isRefreshing = false;
            })
            // 下面这段代码一定要写，不然第一个请求的接口带过去的token还是原来的，要将第一个请求也缓存起来
            let retry = new Promise((resolve) => {
                cacheRequestArrHandle((token) => {
                    config.headers.token = token; // token为刷新完成后传入的token
                    // 将请求挂起
                    resolve(config)
                })
            })
            return retry;
        }
        else{
            let retry = new Promise((resolve) => {
                cacheRequestArrHandle((token) => {
                    config.headers.token = token; // token为刷新完成后传入的token
                    // 将请求挂起
                    resolve(config)
                })
            })
            return retry;
        }
    }
    else{
        return config
    }
}

设置拦截器：

import store from '../../store';
import {isRefreshToken} from '../src/api/refreshToken'
/**
 * 请求拦截
 * interceptors
 * @param instance
 * */
export const interceptors = (instance) => {
    //请求拦截
    instance.interceptors.request.use(config => {
        //  请求头携带token 和env
        let token = localStorage.getItem("userToken") ? JSON.parse(localStorage.getItem("userToken")) : null;
        if(token){
            config.headers.token = token;
        }
        let flag = isRefreshToken(instance, config, store);
        return flag ? flag : config;
    }, (error) => {
        return Promise.reject(error);
    })
    //响应拦截
    instance.interceptors.response.use(res => {
        //返回数据
        if(res.data.dev) return res;
        if (res.data.code !== 0) {
            return Promise.reject(res);
        }else {
            return res;
        }
    }, (error) => {
        return Promise.reject(error);
    })
}