項目背景
最近在項目開發(fā)中，遇到下面這樣一個問題：
需求分析
功能實現(xiàn)
分析完問題后，我們來實現(xiàn)功能
安裝axios, 這里我們就贅述怎么安裝axios.
在 main.js 注冊 axios
Vue.use(Vuex)Vue.use(VueAxios, axios)Vue.use(qs)
注：qs，使用axios，必須得安裝 qs，所有的Post 請求，我們都需要 qs,對參數(shù)進行序列化。
在 request 攔截器實現(xiàn)
axios.interceptors.request.use( config => { config.baseURL = '/api/' config.withCredentials = true // 允許攜帶token ,這個是解決跨域產(chǎn)生的相關(guān)問題 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 攔截器實現(xiàn)
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) })以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持武林網(wǎng)。
新聞熱點
疑難解答
