vue+element踩坑记-统一设置请求头的处理（记录main.js）

何处锦绣不灰堆

发布于 2020-05-29 14:47:13

1.3K0

发布于 2020-05-29 14:47:13

文章被收录于专栏：农历七月廿一

需求分析

我们在做项目的时候，涉及到一个授权的问题，这个其实是一般常见的问题之一，我们的授权是这样做的，很简单，授权登录的时候不需要任何的授权信息，正常登陆就可以了，然后登录成功以后的接口会返回一个授权信息给到我们，写在response里面，那么我们拿到这个新的授权信息之后去请求别的任何的请求，也就是整个系统对于接口的操作都是需要拿到最新的授权信息，那么最新的授权信息是怎么来的呢？其实每一个接口不仅仅需要在header上面加上授权信息的请求头，还需要将最新的授权信息返回到response里面，这样我们每次用一个授权信息请求以后就会拿到一个最新的授权信息，这样的话，就可以保证每一次的请求使用的授权都是最新的，这样做到一个相对比较安全的权限机制。

实现过程

起初的时候我准备给每一个请求都加上请求头，然后再每一个的结尾都将后端返回来的授权信息放到本地存储中，这样的话可以直接每一次都满足要求，但是其实这样存在的一个弊端是冗余的代码过多，代码的复用性极差，但是呢我又是一个vue的新手应用者，很多的文件都不明白怎么使用的，所以就开始找资料，其实这里是我自己给自己挖的坑，因为其实在没有开始进行开发之前就应该将所有的请求封装起来，这样的话可以最大程度上处理请求过程中的一些事情，但是我开始的时候没有想那么多，导致的一个问题就是我现在没办法将所有的请求头更改过来，毕竟项目写了很长一段时间了，那么最后我在资料中发现其实是可以在main.js中统一处理这样的事情的，最后尝试以后写出了下面的代码

代码实现

/**
 * @interceptors.request
 * @ 添加公共的请求头文件 做授权使用  这里是将所有的请求信息拦截掉，之后将最新的授权信息加到请求头里面
 */
axios.interceptors.request.use((request)=>{
      /**
       * undefined null '' === false
       * @type {{authorization: string}}
       */
      request.headers.common = {
        'authorization' : localStorage.getItem('authorization') ? localStorage.getItem('authorization') : router.push({path:'/login'}),
      };
      return request;
});
/**
 * @interceptors.response
 * @ 统一处理请求返回数据，根据返回的数据判断用户是不是已授权，如果是已授权的话，那就直接可以拿到授权信息，将最新的授权信息给到本地存储里面。
 */
axios.interceptors.response.use((response)=>{
      /**
       * message === success
       * @response.data.new_authorization 如果存在授权信息的话，直接将授权信息拿到
       * @response.data.message === 'authorization invalid' 如果授权失效了，那么直接返回到登陆的页面，重新登陆那最新的授权信息
       * @response ；do not get it from the back end 如果后端有接口没有返回授权信息的时候，直接给控制台打印出来提示语
       * @type {{authorization: string}}
       */
      if(response.data.new_authorization){
         localStorage.setItem('authorization',response.data.new_authorization);
         return response;
      }else if(response.data.message === 'authorization invalid'){
         router.push({path:'/login'});
      }else{
         console.error('do not get it from the back end');
      }
});
    new Vue({
      router,
      store,
      el: '#app',
      render: h => h(App)
    })