Vue项目中配置全局axios信息。并使用axios发起请求携带token信息，后端Filter配置拦截器并处理请求头token信息

原创

已于 2024-08-02 11:06:54 修改 · 1.5k 阅读

9 ·

CC 4.0 BY-SA版权

文章标签：

#java

于 2024-08-02 10:52:48 首次发布

首先在Vue项目中配置全局axios信息，在src下新建axios文件夹，里边建一个index.js文件

我的jwt信息存储在sessionStorage，直接从sessionStorage存储里边去取，配置axios信息并导出：

import axios from "axios";
var config={
    //配置请求地址
    baseURL:"http://localhost:8081/",
    //配置超时信息
    timeout:10000,
}
//创建axios实例
var instance = axios.create(config);
//配置拦截器信息
instance.interceptors.request.use((config)=>{
    //获取token信息
    const token=JSON.parse(sessionStorage.getItem('token')).msg 
    //设置请求头token信息
    if(token){
        config.headers.token = token;
    }
    return config
},(error)=>{
    return Promise.reject(error);
})
instance.interceptors.response.use((response)=>{
    //处理响应结果response
    console.log(response);
})
export default instance

在main.js文件里边配置全局使用：