美文网首页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安装与基本配置

    安装:$npm install axios --save get请求: post请求: 请求拦截器和响应拦截器

  • axios--拦截器(1)

    关于axios的拦截器是一个作用非常大,非常好用的东西。分为请求拦截器和响应拦截器两种。 请求拦截器响应拦截器 我...

  • axios进阶之路——拦截器篇

    本课题包含三篇:基础篇;拦截器篇;封装篇。本篇为拦截器篇,主题为axios的请求拦截器、响应拦截器配置。 一、 拦...

  • vue之axios篇 request拦截器的使用

    axios里面可以设置拦截器 ,可以在我们正式请求发送之前做一些事情拦截器分请求拦截器和响应拦截器首先我们看下请求...

  • vue之axios篇 拦截器

    axios里面可以设置拦截器 ,可以在我们正式请求发送之前做一些事情拦截器分请求(request)拦截器和响应(r...

  • axios拦截器

    拦截器 在请求或响应被then或catch处理前拦截它们。 // 添加请求拦截器 axios.intercepto...

  • axios使用详解

    文档 1. 拦截器 1.1 请求拦截器 基本格式 可以添加一些头部信息 1.2 响应拦截器 axios响应时,基本...

  • axios 请求拦截器&响应拦截器

    一、 拦截器介绍 一般在使用axios时,会用到拦截器的功能,一般分为两种:请求拦截器、响应拦截器。 请求拦截器在...

  • vue+node(express)做中间层开发二--使用axio

    axios拦截器 参考iview-admin项目所得 拦截器可以用于api请求的错误处理,包括请求拦截和响应拦截。...

  • Vue方向:axios全局拦截器以及配置的优先级

    1、axios全局拦截器 axios在每一个请求配置中都有一个配置项用于拦截请求或响应结果 这个拦截只能拦截当前配...

网友评论

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

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