前言
最近在做需求的時候,涉及到登錄token,產品提出一個問題:能不能讓token過期時間長一點，我頻繁的要去登錄，
- 前端：后端，你能不能把token 過期時間設定的長一點，
- 后端：可以,但是那樣做不安全，你可以用更好的方法，
- 前端：什么方法?
- 后端：給你重繪token的介面，定時去重繪token
- 前端：好，讓我思考一下
需求
當token過期的時候，重繪token,前端需要做到無感重繪token,即刷token時要做到用戶無感知，避免頻繁登錄，實作思路
方法一：后端回傳過期時間，前端判斷token過期時間,去呼叫重繪token介面
缺點：需要后端額外提供一個token過期時間的欄位；使用了本地時間判斷，若本地時間被篡改，特別是本地時間比服務器時間慢時，攔截會失敗，方法二：寫個定時器，定時重繪token介面
缺點：浪費資源,消耗性能,不建議采用，方法三：在回應攔截器中攔截，判斷token 回傳過期后，呼叫重繪token介面
實作
axios的基本骨架,利用service.interceptors.response 進行攔截
import axios from 'axios';router.push('/login'); returnPromise.reject(err); }); } returnresponse && response.data; }, (error) => { Message.error(error.response.data.msg); returnPromise.reject(error); } );
service.interceptors.response.use(
(response) => {
if (response.data.code === 409) {
return refreshToken({ refreshToken: localStorage.getItem('refreshToken'), token: getToken })
.then((res) => {
const { token } = res.data;
setToken(token);
response.headers.Authorization = `${token}`;
})
.catch((err) => {
removeToken;
問題一：如何防止多次重繪token
我們通過一個變數isRefreshing 去控制是否在重繪token的狀態，
import axios from 'axios'} return response && response.data }, (error) => { Message.error(error.response.data.msg) return Promise.reject(error) } )
service.interceptors.response.use(
response => {
if (response.data.code === 409) {
if (!isRefreshing) {
isRefreshing = true
return refreshToken({ refreshToken:
localStorage.getItem('refreshToken'), token: getToken }).then(res => {
const { token } = res.data
setToken(token)
response.headers.Authorization = `${token}`
}).catch(err => {
removeToken
router.push('/login')
return Promise.reject(err)
}).finally(() => {
isRefreshing = false
})
}
問題二：同時發起兩個或者兩個以上的請求時，其他介面怎么解決
當第二個過期的請求進來，token正在重繪，我們先將這個請求存到一個陣列佇列中，想辦法讓這個請求處于等待中，一直等到重繪token后再逐個重試清空請求佇列，那么如何做到讓這個請求處于等待中呢？為了解決這個問題，我們得借助Promise，將請求存進佇列中后，同時回傳一個Promise，讓這個Promise一直處于Pending狀態（即不呼叫resolve），此時這個請求就會一直等啊等，只要我們不執行resolve，這個請求就會一直在等待，當重繪請求的介面回傳來后，我們再呼叫resolve，逐個重試，最終代碼：import axios from 'axios'// 是否正在重繪的標記 let isRefreshing = false //重試佇列 let requests = [] service.interceptors.response.use( response => { //約定code 409 token 過期 if (response.data.code === 409) { if (!isRefreshing) { isRefreshing = true //呼叫重繪token的介面 return refreshToken({ refreshToken: localStorage.getItem('refreshToken'), token: getToken }).then(res => { const { token } = res.data // 替換token setToken(token) response.headers.Authorization = `${token}` }).catch(err => { //跳到登錄頁 removeToken router.push('/login') return Promise.reject(err) }).finally(() => { isRefreshing = false }) } else { // 回傳未執行 resolve 的 Promise return new Promise(resolve => { // 用函式形式將 resolve 存入，等待重繪后再執行 requests.push(token => { response.headers.Authorization = `${token}` resolve(service(response.config)) }) }) } } return response && response.data }, (error) => { Message.error(error.response.data.msg) return Promise.reject(error) } )
最終代碼
import axios from 'axios'import { getToken, setToken, getRefreshToken } from '@utils/auth' // 重繪 access_token 的介面 const refreshToken = () => { return instance.post('/auth/refresh', { refresh_token: getRefreshToken() }, true) } // 創建 axios 實體 const instance = axios.create({ baseURL: process.env.GATSBY_API_URL, timeout: 30000, headers: { 'Content-Type': 'application/json', } }) let isRefreshing = false // 標記是否正在重繪 token let requests = [] // 存盤待重發請求的陣列 instance.interceptors.response.use(response => { return response }, error => { if (!error.response) { return Promise.reject(error) } if (error.response.status === 401 && !error.config.url.includes('/auth/refresh')) { const { config } = error if (!isRefreshing) { isRefreshing = true return refreshToken().then(res=> { const { access_token } = res.data setToken(access_token) config.headers.Authorization = `Bearer ${access_token}` // token 重繪后將陣列的方法重新執行 requests.forEach((cb) => cb(access_token)) requests = [] // 重新請求完清空 return instance(config) }).catch(err => { console.log('抱歉，您的登錄狀態已失效，請重新登錄！') return Promise.reject(err) }).finally(() => { isRefreshing = false }) } else { // 回傳未執行 resolve 的 Promise return new Promise(resolve => { // 用函式形式將 resolve 存入，等待重繪后再執行 requests.push(token => { config.headers.Authorization = `Bearer ${token}` resolve(instance(config)) })}) } } return Promise.reject(error) }) // 給請求頭添加 access_token const setHeaderToken = (isNeedToken) => { const accessToken = isNeedToken ? getToken() : null if (isNeedToken) { // api 請求需要攜帶 access_token if (!accessToken) { console.log('不存在 access_token 則跳轉回登錄頁') } instance.defaults.headers.common.Authorization = `Bearer ${accessToken}` } } // 有些 api 并不需要用戶授權使用，則無需攜帶 access_token；默認不攜帶，需要傳則設定第三個參 數為 true export const get = (url, params = {}, isNeedToken = false) => { setHeaderToken(isNeedToken) return instance({ method: 'get', url, params, }) } export const post = (url, params = {}, isNeedToken = false) => { setHeaderToken(isNeedToken) return instance({ method: 'post', url, data: params, }) }
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/501813.html
標籤：其他