axios拦截所有请求和响应

原创已于 2023-07-05 09:54:44 修改

· 668 阅读

0 ·

版权

文章标签：

#vue.js #前端 #javascript

于 2023-07-05 09:51:13 首次发布

在VueCLI项目中，为了在每个请求中添加如token的验证信息，可以利用axios的拦截器在main.js中配置，这样能统一处理所有请求和响应。在请求拦截器中，从localStorage获取token并添加到headers中；在响应拦截器中，可处理错误情况，如跳转到登录页。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在vueCli工程中，难免不了要向后端传递请求头等验证信息！！！如果每个请求一个一个的去添加请求头信息肯定不行，那么就得拦截所有请求去添加请求头信息。

拦截所有请求

在main.js中添加

axios.interceptors.request.use(config => {
    //在请求头中添加token
    config.headers.token=localStorage.getItem('token');
    // alert(config.headers.token)
    return config;
    },
    error => {
        ElementUI.Message.error("请求出错了，请稍后再试。ʕ•ᴥ•ʔ")
        return Promise.reject(error);
    });

拦截所有响应

axios.interceptors.response.use(response => {
        return response
    },
    error => {
        router.push("/login")
        return Promise.reject(error);
    })