總：通過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();},

vue的token刷新處理

總結

以上是生活随笔為你收集整理的Vue中token刷新及token过期的实现的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。