vue中 axios 设置全局请求头和响应头

原创 111阅读 · 时间2019年7月9日 16:45

在前后端分离项目中,每次请求都需要带上token才能获取到数据,每次请求也需要验证当前token是否过期,如果在每一个请求上加入太费事,也不便于维护。

所以,我们设置全局的 axios 请求头和响应头处理。

axios 自带的有请求头拦截 和响应头拦截,我们便在这里动手!!


在 main.js下键入如下代码即可设置:

import axios from 'axios'


// http request 拦截器
// 给每个api请求头加token
axios.interceptors.request.use(
  config => {
      if (localStorage.token) {  // 判断是否存在token,如果存在的话,则每个http header都加上token
          config.headers.Authorization = `JWT ${localStorage.token}`;
    }
  return config;
},
err => {
  return Promise.reject(err);
});


// http response 拦截器
// 验证每个请求响应头是否为401(用户认证失败) 失败即清除本地token并跳转到登陆页面
axios.interceptors.response.use(
  response => {
      return response;
  },
  error => {
      if (error.response) {
          switch (error.response.status) {
              case 401:
              // 返回 401 清除token信息并跳转到登录页面
              window.localStorage.removeItem('token')
              // 如果当前页面不是首页 就跳转
              if(router.currentRoute.fullPath != '/'){
                  router.replace({
                  path: '/login',
                  query: {redirect: router.currentRoute.fullPath}
              });
          }
      }
  }
  return Promise.reject(error.response.data);   // 返回接口返回的错误信息
});
// 将axios绑定到vue原型上
Vue.prototype.$axios = axios;


这时我们再发送请求时,在请求头中都带有当前的token;

如果当前token过期 ,将自动重定向到 登陆页面并清除当前过去的token


来看请求头中的token:

image.png


评论

本站升级中... 如有好的建议请加入QQ群!

相关文章推荐 ?
近七日热文推荐 !
回到顶部