专栏首页农历七月廿一vue+element踩坑记-统一设置请求头的处理(记录main.js)

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

需求分析

我们在做项目的时候,涉及到一个授权的问题,这个其实是一般常见的问题之一,我们的授权是这样做的,很简单,授权登录的时候不需要任何的授权信息,正常登陆就可以了,然后登录成功以后的接口会返回一个授权信息给到我们,写在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)
    })

这里我写的可能不全面,严格的讲是一定不全面,但是目前这样的问题基本可以解决,有bug是一定的,但是可以作为一个参考。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • H5学习之路之Input类型新特性

    input的输入类型在H5之前已经有很多很广泛的使用了,但是H5其实加入了很多新的属性和验证,提供方便的同时给我们开发带来了更多的是安全性的提升,今天我们就简单...

    何处锦绣不灰堆
  • XAMPP启动报错: Apache shutdown unexpectedly or MySQL shutdown unexpectedly

    你们是不是也是这样?哈哈 ,如果是问题就很简单了,因为你仔细读读报错信息的话其实是很简单的,是不是懒得翻译?我帮您翻译:

    何处锦绣不灰堆
  • 快速搭建一个FTP服务器

    工欲善其事,必先利其器,没有开始搭建之前先给你们介绍一个比较好用的FTP管理工具,iis7服务器管理工具,这是一个很好用的服务器管理工具,不管你是程序员、运维、...

    何处锦绣不灰堆
  • HTTP Status 500 - java.lang.Long cannot be cast to java.lang.Integer

    qubianzhong
  • [享学Feign] 六、原生Feign的解码器Decoder、ErrorDecoder

    代码下载地址:https://github.com/f641385712/feign-learning

    YourBatman
  • Css3 Animation 动画原则九

    动画的时间节奏是需要多久去完成,它可以被用来让看起来很重的对象做很重的动画,或者用在添加字符的动画中。

    grain先森
  • 一次触摸,Android到底干了啥

    当我们在写带有UI的程序的时候,如果想获取输入事件,仅仅是写一个回调函数,比如(onKeyEvent,onTouchEvent….),输入事件有可能来自按键的,...

    WeTest质量开放平台团队
  • 数字可视化大屏+组态软件,你说智慧地铁凭啥这么强?

    地铁是现阶段缓解城市交通压力的有效手段,很多城市都开始大力推进地铁事业的建设,地铁综合监控系统作为地铁系统中的关键系统。

    用户7703111
  • 一次触摸,Android 到底干了啥

    通过 Android 系统输入子系统的分析来回答你。

    WeTest质量开放平台团队
  • 完整的 Spring Boot 下载文件示例代码

    一个会写诗的程序员

扫码关注云+社区

领取腾讯云代金券