axios的攔截器
阿新 • • 發佈:2020-08-11
在scr目錄下的api目錄建立一個JS檔案
我的這個請求攔截器的功能是為我每一次請求去判斷是否有token,如果token存在則在請求頭加上這個token。後臺會判斷我這個token是否過期
import axios from 'axios' //引入axios //下面這兩個不一定需要引入,看你專案需要攔截的時候做什麼操作,但是一般都需要引入store import store from '@/store/index' //引入store import router from '@/router' //引入router建立一個axios例項
let axios= axios.create({ headers: { 'content-type': 'application/x-www-form-urlencoded' } })請求攔截器 這個攔截器會在你傳送請求之前執行
我的這個請求攔截器的功能是為我每一次請求去判斷是否有token,如果token存在則在請求頭加上這個token。後臺會判斷我這個token是否過期
// http request 攔截器 axios.interceptors.request.use( // 在傳送請求之前做些什麼 config => { const token = sessionStorage.getItem('token') if (token ) { // 判斷是否存在token,如果存在的話,則每個http header都加上token config.headers.authorization = token //響應攔截器請求頭加上token } return config }, err => { return Promise.reject(err) })
// http response 攔截器 axios.interceptors.response.use( response => { //攔截響應,做統一處理 if (response.data.code) { switch (response.data.code) { case 1002: store.state.isLogin = false在需要的頁面匯入就可以使用了router.replace({ path: 'login', query: { redirect: router.currentRoute.fullPath } }) } } return response }, //介面錯誤狀態處理,也就是說無響應時的處理 error => { return Promise.reject(error.response.status) // 返回介面返回的錯誤資訊 })
import instance from './axios' /* 驗證登陸 */ export function handleLogin (data) { return axios.post('/ds/user/login', data) }攔截器