前言 最近在做需求的時候,涉及到登錄token,產品提出一個問題:能不能讓token過期時間長一點，我頻繁的要去登錄。 前端：後端，你能不能把token 過期時間設置的長一點。 後端：可以,但是那樣做不安全，你可以用更好的方法。 前端：什麼方法? 後端：給你刷新token的介面，定時去刷新token ...
前言
最近在做需求的時候,涉及到登錄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, }) }
