二次封装axios
问题:
- 请求:每当我们向后端获取数据的时候都要在
headers
中携带token
,我们要怎么样简化代码呢? - 响应:每次携带回来的数据,我们都要判断code数值是否是
401
也就是token过期的问题,我们要怎么解决呢?
import router from "@/router"
import store from "@/store"
import axios from "axios"
import { Message } from "element-ui"
const myAxios = axios.create({
baseURL: "http://big-event-vue-api-t.itheima.net"
})
// 请求拦截器
myAxios.interceptors.request.use((config) => {
//只有当然 非登录 非退出接口携带token
if (store.state.token) {
config.headers.Authorization = store.state.token
}
return config
}, (error) => {
return Promise.reject(error)
})
//相应拦截器
myAxios.interceptors.response.use((response) => {
return response
}, (error) => {
if (error.response.status === 401) {
store.commit("TOEKNEXPIRE")
router.push("/login")
}
Message.error("用户身份过期")
return Promise.reject(error)
})
export default myAxios