美文网首页web前端
axios配置、请求拦截器和响应拦截器

axios配置、请求拦截器和响应拦截器

作者: 兰德索尔 | 来源:发表于2021-04-22 08:31 被阅读0次
    //1.新建axios实例
    import axios from 'axios'
    import jsCookie from 'js-cookie'
    import router from "@/router";
    import Base from "../util/Base64";
    
    const instance = axios.create({
        baseURL: 'http://192.168.1.84:8081/m.api',//url
        timeout: 3000//请求超时
    });
    
    // 2.拦截器的配置
    // 2.1 请求拦截
    // 请求拦截器
    
    instance.interceptors.request.use((config) => {
        config.headers['AdminToken'] = jsCookie.get('AdminToken')
        return config
    }, function (error) {
        return Promise.reject(error)
    })
    
    
    
    // // 2.2 响应拦截
    // // 添加响应拦截器---无限刷新令牌,无痛刷新,令牌刷新
    instance.interceptors.response.use(
        (response) => {
            // console.log('response', response);
            const code = response.data.errno;
            if (code == "10001" || code == "10006") {
                // console.log('user',jsCookie.get('user'))
                if (jsCookie.get('user') && jsCookie.get('pass')) {
                    return login(response)
                } else {
                    router.replace("/"); //未存储时跳转登录页面
                }
            } else {
                //否则返回数据
                return response;
            }
            // console.log(response.config)
            // console.log(response.data.errno)
            // 对响应数据做点什么
            // 根据返回的状态码来做相对应的事情--10001  10006这个两个状态码需要做令牌刷新的功能
            // 1.获取到登录的账户和密码
            // 2.重新登录
            // 3.把重新登录之后的token重新赋值给请求头(aysnc---await)
            return response;
        },
        (error) => {
            // 对响应错误做点什么
            return Promise.reject(error);
        }
    );
    
    async function login(response) {
        let res = await instance({
            method: "get",
            params: {
                _gp: "admin",
                _mt: "login",
                username: Base.decode(jsCookie.get('user')),
                password: Base.decode(jsCookie.get('pass')),
                verifyCode: "666666",
            },
        });
        if (res.data.errmsg == "成功") {
            //let seconds = 1200;
            //let expires = new Date(new Date() * 1 + seconds * 1000); //因为单位是天,所以需要转
            // jsCookie.set("AdminToken", res.data.data, { expires: expires });
            jsCookie.set("AdminToken", res.data.data)
            response.config.headers["AdminToken"] = res.data.data;
            console.log(response.config)
            return await axios(response.config); //返回改变后的配置
        }
    }
    
    //最后导出
    export default instance;
    
    

    相关文章

      网友评论

        本文标题:axios配置、请求拦截器和响应拦截器

        本文链接:https://www.haomeiwen.com/subject/thxtrltx.html