本文大概配置了下 雙token免登錄
關于下文提到的store中封裝的保存token的方法，請參考本鏈接：

/*** 封裝 axios 請求模塊*/ import axios from 'axios' import jsonBig from 'json-bigint' import store from '@/store' import router from '@/router' // 導入路由模塊 // 配置公共請求頭 const request = axios.create({baseURL: 'xxxxxx/', // 基礎路徑transformResponse: [ // 下面的寫法二“function(data) { // data 是后端返回的原始數據 ，一般是JSON對象，格式不確定，所以可能報錯，使用try catchtry {return jsonBig.parse(data) // 注意這里返回出去的 BigNumber 對象是一個對象，在使用時要注意不能直接使用，需要轉換成字符串來使用} catch (err) {return {}}}] }) /*** 配置處理后端返回數據中超出 js 安全整數范圍問題* 這是axios中的 api -- transformResponse , axios 默認會在內部這樣處理后端返回的數據* 所有請求都會經過這個，寫法一：*/ // request.defaults.transformResponse = [ // function(data) { // try { // return jsonBig.parse(data) // } catch (err) { // return {} // } // } // ]// 請求攔截器 request.interceptors.request.use(function(config) {const user = store.state.userif (user) {config.headers.Authorization = `Bearer ${user.token}`}// Do something before request is sentreturn config},function(error) {// Do something with request errorreturn Promise.reject(error)} ) // 響應攔截器 request.interceptors.response.use(// 響應成功進入第1個函數// 該函數的參數是響應對象function(response) {// Any status code that lie within the range of 2xx cause this function to trigger// Do something with response datareturn response},// 響應失敗進入第2個函數，該函數的參數是錯誤對象async function(error) {// Any status codes that falls outside the range of 2xx cause this function to trigger// Do something with response error// 如果響應碼是 401 ，則請求獲取新的 token// 響應攔截器中的 error 就是那個響應的錯誤對象console.dir(error)if (error.response && error.response.status === 401) {// 校驗是否有 refresh_tokenconst user = store.state.userif (!user || !user.refresh_token) {router.push('/login') // 直接跳轉會登陸頁面// 代碼不要往后執行了return}// 如果有refresh_token，則請求獲取新的 tokentry {const res = await axios({method: 'PUT',url: 'xxxxxxxxxxxx', // 設置重新獲取新的token 接口headers: {Authorization: `Bearer ${user.refresh_token}` // 使用 user中存儲的 refresh_token 去獲取新的token}})// 如果獲取成功，則把新的 token 更新到容器中console.log('刷新 token 成功', res)store.commit('xxx', { // 調用 store/index.js 中封裝的方法來保存 新的 token // 這個封裝的方法在本文沒有寫，在該 鏈接中有說明 https://blog.csdn.net/weixin_47988564/article/details/108066478token: res.data.data.token, // 最新獲取的可用 tokenrefresh_token: user.refresh_token // 還是原來的 refresh_token})// 把之前失敗的用戶請求繼續發出去// config 是一個對象，其中包含本次失敗請求相關的那些配置信息，例如 url、method 都有// return 把 request 的請求結果繼續返回給發請求的具體位置return request(error.config)} catch (err) {// 如果獲取失敗，直接跳轉 登錄頁console.log('請求刷線 token 失敗', err)router.push('/login')}}return Promise.reject(error)} ) export default request

總結

以上是生活随笔為你收集整理的模块化封装 --- 双ToKen 实现免登录步骤详解的全部內容，希望文章能夠幫你解決所遇到的問題。

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