axios请求拦截器--token验证

需求描述如下:

  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')
    }
})

 

你可能感兴趣的:(Vue,web)