Vue中token刷新及token过期的实现

总：通过axios，vuex，及自定义的方法实现。
以下是思路：
1.做token刷新必不可少的是，token（请求时的token） / refresh_token（刷新token时用的refresh_token） / resetTime（token有效时间）
2.通过axios请求-回复来做相应的操作，具体实现如下：

对应修改之处：（自己看的，如果疑问，可留言）
一、在 main.js中，写入如下代码

import axios from 'axios'
import { getRefreshToken, isRefreshTokenExpired} from './assets/js/format' //刷新token的接口与过期时间倒计时
window.isReresh = false;//用于判断是否刷新，不能少// 添加请求拦截器，在请求头中加token
axios.interceptors.request.use(config => {let token = sessionStorage.getItem('Authorization');if (token) {config.headers.Authorization = token;}return config;},error => {return Promise.reject(error);});// http response 拦截器
axios.interceptors.response.use(response => {let resetTime= sessionStorage.getItem('resetTime');let token = sessionStorage.getItem('Authorization');if(token){//有没有tokenisRefreshTokenExpired(resetTime);if(resetTime<1200){//时间少于20分钟(1200)，20分钟之内为期限if(!window.isReresh){window.isReresh = true;let refresh_token = sessionStorage.getItem('refresh_token')getRefreshToken(refresh_token).then(res => {window.isReresh = false;isRefreshTokenExpired(res.data.resetTime);// 重新获取的token有效时间store.commit('changeLogin',{//vuex中修改相关信息Authorization:res.data.access_token,token_type:res.data.token_type,refresh_token:res.data.refresh_token,});}).catch(err => {});}}else window.isReresh = false;}return response;  //请求成功的时候返回的data},error => {try {if (error.response) {endLoading();switch (error.response.status) {case 401://token过期，清除它,清除token信息并跳转到登录页面store.commit('DelToken');router.replace({path: '/login',query: {redirect: router.currentRoute.fullPath//登录之后跳转到对应页面}});return;case 403://权限store.commit('DelToken');router.replace({path: '/login',query: {redirect: router.currentRoute.fullPath//登录之后跳转到对应页面}});return;}}return Promise.reject(error.response.data)}catch (e) {}});

二、在自定义的jsformat.js中，写入如下代码

export function getRefreshToken(param) { // 刷新token 注意这里用到的servicelet params = {refreshToken:param}return axios.post(baseUrl+'/account-center/refresh/token',params).then((res) => {return Promise.resolve(res.data)})
}export function isRefreshTokenExpired(timestamp) {clearInterval(window.interval);window.interval = setInterval(()=>{timestamp=timestamp-1sessionStorage.setItem('resetTime',timestamp)},1000)
}

三、在vuex中的mutation中

changeLogin: function (state, user ) {// CryptoJS.enc.Base64.stringify(obj) 加密// CryptoJS.enc.Base64.parse(base64).toString(CryptoJS.enc.Utf8) 解密state.Authorization = user.token_type + ' ' + user.Authorization;state.refresh_token = user.refresh_token;state.user_message = CryptoJS.enc.Base64.parse(user.Authorization.split('.')[1]).toString(CryptoJS.enc.Utf8);sessionStorage.setItem('Authorization', state.Authorization);sessionStorage.setItem('user_message', state.user_message);sessionStorage.setItem('refresh_token', state.refresh_token);},DelToken(state){state.Authorization = '';sessionStorage.clear();},