在處理token過期的這個問題上困擾了我很久，現在終于解決的了，所以分享出來給大家，希望能夠對大家有所幫助。

首先，當然是路由進行攔截，路由攔截當然是在beforeEach中了：

router.beforeEach((to, from, next) => {
iView.LoadingBar.start(); //Util.title(to.meta.title, router.app); Util.title(to.meta.title);
if (Cookies.get('locking') === '1' && to.name !== 'locking') { // 判斷當前是否是鎖定狀態 next({ replace: true, name: 'locking' }); } else if (Cookies.get('locking') === '0' && to.name === 'locking') { next(false); } else {

if (!Cookies.get('status') && to.name !== 'login') { // 判斷是否已經登錄且前往的頁面不是登錄頁 //alert('登錄過期！請重新登錄！');
next({ name: 'login' }); } else if (Cookies.get('status') && to.name === 'login') { // 判斷是否已經登錄且前往的是登錄頁 Util.title(); next({ name: 'home_index' }); } else { Util.toDefaultPage(routers, to.name, router, next); next(); } } // })
// }

});

路由攔截過后，當然就到了axios的攔截，在每次的后臺請求中攔截一次判斷后臺token是否過期：

//請求時的攔截 util.ajax.interceptors.request.use(function(config){const token = Cookies.get('status');if (token) {// config.headers.common['Authorization'] = token;config.headers.Authorization = token;}return config },function(error){return Promise.reject(error); });//響應時的攔截 util.ajax.interceptors.response.use(response => {//對響應數據做操作if (response.data.msg == '登錄失效') { //這里是判斷后臺的token是否過期Cookies.remove("status"); //如果過期則清除前端的token并跳轉到登錄頁 //這里需要說明一下，如果你是用的是hash模式，使用下面的就可以了 ，如果使用的是history 模式則使用window.location.href='/login';就可以了window.location.href='#/login';}return response;},error => {//對響應數據錯誤做操作debuggerif(response.data.code == 1000000) {Cookies.remove("status");window.location.href='#/login'return Promise.reject(response);}return Promise.reject(error); });

axios的攔截我是寫在util.js的文件中的；

?

下面是我的公眾號，歡迎大家關注，可以一起學習一起進步：

轉載于:https://www.cnblogs.com/lxl0419/p/10330480.html

總結

以上是生活随笔為你收集整理的vue中前端处理token过期的方法与axios请求拦截处理的全部內容，希望文章能夠幫你解決所遇到的問題。

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