Vue3 在Axios中添加数据来自于sessionStorage的请求头（请求头添加token）

Posted 2022-11-05 UDK_KL.

main.js

const app = createApp(App)
app.config.globalProperties.$http = axios;
//接口请求的基准路径
axios.defaults.baseURL = 'http://192.168.1.111:8083/';
// 添加请求拦截器

axios.interceptors.request.use(config => 
    // 在发送请求之前做些什么

    // 判断是否存在token,如果存在将每个页面header添加token
    if (sessionStorage.getItem("token")) 
    	            //  ↓↓↓注意此处要与后端设置的变量名相统一
        config.headers.token = sessionStorage.getItem("token");   
    

    return config
)

如果添加后出现跨域问题则是前后端变量名或后端配置问题

将数据存进sessionStorage

login()
      this.$http(
        method:'post',
        url:'/User/Login', 	//端口号
        data: this.loginForm //传递给后端的数据
      ).then(res=>
        window.sessionStorage.setItem("后端传来的数据变量名", res.data.变量名)//将后端传来的数据存进sessionStorage，具体路径依照后端传来的数据为准
      )