axios请求拦截器--token验证

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文链接： https://blog.csdn.net/weixin_41847321/article/details/98472008

需求描述如下：

1. 新用户首次访问页面时，未携带token
2. 接口访问成功后，后端返回一个token值，前端需要在之后每次访问时携带token，去请求接口
3. vue cli 

具体做法是，在第一次调用接口成功后，将token存入到localStorage中，同时，添加请求拦截器，在以后每次访问时携带token。

在mian.js中配置 

// 添加请求拦截器
axios.interceptors.request.use(function (config) {
    // 在发送请求之前做些什么
    //若token存在，则在每次请求头中加入token
    if(localStorage.getItem('token')){
    axios.defaults.headers.commom['token']=localStorage.getItem('token')
}
    return config;
  }, function (error) {
    // 对请求错误做些什么
    return Promise.reject(error);
  });

 在相应的界面

axios.get("xxxx").then(res=>{
    //请求成功后，若res中有token，则将其存入localStorage
    if(res.data.data.token){
    localStorage.setItem('token')
    }
})