在Vue開發中,我們經常會遇到401未授權的問題。當用戶未授權或者令牌過期,我們需要讓用戶跳轉到登錄頁面。下面,我們就來看一下如何實現Vue 401跳轉。
首先,在需要驗證用戶身份的路由中,需要使用路由導航守衛,檢查用戶是否已經登錄或者令牌是否過期。
//路由導航守衛 router.beforeEach((to, from, next) =>{ //檢查用戶是否已經登錄或者令牌是否過期 if (to.meta.requireAuth) { if (store.getters.isLogin) { next(); } else { next({ path: '/login', query: { redirect: to.fullPath } }); } } else { next(); } });
這樣,當用戶試圖訪問需要驗證的頁面時,會自動跳轉到登錄頁面。但是,在我們使用接口請求數據時,如果返回的狀態碼是401,我們同樣需要讓用戶跳轉到登錄頁面。
//http請求攔截器 axios.interceptors.response.use( response =>{ return response; }, error =>{ if (error.response.status === 401) { router.replace({ path: '/login', query: { redirect: router.currentRoute.fullPath } }); } return Promise.reject(error); } );
通過在http請求攔截器中設置狀態碼為401的錯誤處理函數,即可實現接口請求返回401時的頁面跳轉。現在,無論用戶試圖訪問哪個需要驗證的頁面或者請求哪個接口,都能夠在未登錄或令牌過期時跳轉到登錄頁面了。