温故·axios请求拦截器和响应拦截器

刘听风 427 2022-07-05
// 1.创建一个新的axios实例
// 2.请求拦截器 如果token进行头部携带
// 3.响应拦截器:1.剥离无效数据 2.处理token失效
// 4.导出一个函数,调佣当前的axios实例发请求,返回值promise

import axios from 'axios'
import store from '@/store'
import router from '@/router'

// 导出基准地址,原因 其他地方不是通过axios发请求的地方用上基准地址
export const baseURL = 'xxx.com'
const instance = axios.create({
    // axios的一些配置  baseURL  timeout
    baseURL,
    timrout:5000
})

instance.interceptors.request.use(config =>{
    // 拦截业务逻辑
    // 进行请求配置的修改
    // 如果本地又token
    // 1.获取用户信息对象
    const { profile } = store.store.user
    // 2.判断是否有token
    if (profile.token) {
            config.headers.Authorization = `Bearer ${profile.token}`
    }
    return config 
},err => {
    return Promise.reject(err)
})

// res=>res.data 取出data数据,将来调用接口的时候直接拿到后台数据
instance.interceptors.request.use(res => res.data, err => {
    // 401 状态码 进入函数
    if (err.response && err.response.status === 401) {
        // 1.清空本地无效用户信息
        // 2.跳转到登陆页面
        // 3.跳转需要传参(当前路由地址)给登录页码
        store.commit('xxx/方法',{})
        // 当前路由地址
        // 组件里头:$route.path   $route.fullpath
        // js模块中:roter.courrentRoute.value.fullpath 就是当前地址
        const fullpath = encodeURIComponent(roter.courrentRoute.value.fullpath) //转码
        // encodeURIComponent url转码 防止解析地址出现问题
        router.push('./login?xx=' + fullpath)
    }
    return Promise.reject(err)
})