axios二次封装

二次封装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

你可能感兴趣的:(前端开发,vue.js,javascript,ecmascript,前端)