最近在項目開發中,遇到下面這樣一個問題:
在進行數據請求之前,每個請求需要攜帶token, 但是token 有有效期,token 失效后需要換取新的token并繼續請求。
需求分析
每個請求都需要攜帶 token ,所以我們可以使用 axios request 攔截器,在這里,我們給每個請求都加 token,這樣就可以節省每個請求再一次次的復制粘貼代碼。
token 失效問題,當我們token 失效,我們服務端會返回一個特定的錯誤表示,比如 token invalid,但是我們不能在每個請求之后去做刷新 token 的操作呀,所以這里我們就用 axios response 攔截器,我們統一處理所有請求成功之后響應過來的數據,然后對特殊數據進行處理,其他的正常分發
功能實現
分析完問題后,我們來實現功能
安裝axios, 這里我們就不再贅述怎么安裝axios.
在 main.js 注冊 axios
在 request 攔截器實現
axios.interceptors.request.use( config => { config.baseURL = '/api/' config.withCredentials = true // 允許攜帶token ,這個是解決跨域產生的相關問題 config.timeout = 2500 let token = sessionStorage.getItem('access_token') let csrf = store.getters.csrf if (token) { config.headers = { 'access-token': token, 'Content-Type': 'application/x-www-form-urlencoded' } } if (config.url === 'refresh') { config.headers = { 'refresh-token': sessionStorage.getItem('refresh_token'), 'Content-Type': 'application/x-www-form-urlencoded' } } return config }, error => { return Promise.reject(error) } )
在 response 攔截器實現
axios.interceptors.response.use( response => { // 定時刷新access-token if (!response.data.value && response.data.data.message === 'token invalid') { // 刷新token store.dispatch('refresh').then(response => { sessionStorage.setItem('access_token', response.data) }).catch(error => { throw new Error('token刷新' + error) }) } return response }, error => { return Promise.reject(error) } )
1、請求攔截器
請求攔截器的作用是在請求發送前進行一些操作,例如在每個請求體里加上token,統一做了處理如果以后要改也非常容易。
axios.interceptors.request.use(function (config) { // 在發送請求之前做些什么,例如加入token ....... return config; }, function (error) { // 對請求錯誤做些什么 return Promise.reject(error); });
2、響應攔截器
響應攔截器的作用是在接收到響應后進行一些操作,例如在服務器返回登錄狀態失效,需要重新登錄的時候,跳轉到登錄頁。
axios.interceptors.response.use(function (response) { // 在接收響應做些什么,例如跳轉到登錄頁 ...... return response; }, function (error) { // 對響應錯誤做點什么 return Promise.reject(error); });
3、移除攔截器
var myInterceptor = axios.interceptors.request.use(function () {/*...*/}); axios.interceptors.request.eject(myInterceptor);