1、引入axios、token
import axios from "axios"
import { Message, MessageBox } from "element-ui"
import {getToken, removeToken} from "./token";
2、創建axios實例
-
可以使用自定義配置新建一個 axios 實例
-
axios.create([config])
const service = axios.create({
baseURL: process.env.VUE_APP_API_BASE, // api的base_url
timeout: 5000 // 請求超時時間
})
3、添加請求攔截器request
在請求被 then
或 catch
處理前攔截它們。
service.interceptors.request.use(
config => {
let token = getToken();
if (token && token !== undefined && token !== "" && token !== "undefined") {
config.headers['Authorization'] = "Bearer " + token;
}
return config;
},
error => {
Promise.reject(error);
}
);
瀏覽器調試
4、添加響應攔截器respone
在響應被 then
或 catch
處理前攔截它們。
service.interceptors.response.use(
response => {
const res = response.data;
if(res.code === 401) {
//尚未登錄
removeToken();
this.$router.push('/login');
}
if (res.code != "0") {
Message({
message: res.message,
type: 'error',
duration: 5 * 1000
});
return Promise.reject(res);
} else {
return res;
}
},
error => {
Message({
message: error.message,
type: "error",
duration: 5 * 1000
});
return Promise.reject(error);
}
);
export default service;