zoukankan      html  css  js  c++  java
  • vue请求拦截

    写了很多的vue项目,经常碰到需要做请求拦截的情况,从发请求前的token判断到对返回信息的响应,我自己在不同的阶段是用不同的方式处理的。

    入门阶段

    记得当时做的第一个项目,是需要在请求头部加入登录是获取到的token,每个接口都需要,因此就有了下面的代码:

    每次请求前,拿到token,再封装到头部信息中,再传递给后台。

    公共方法

    后来,需求升级了,在请求前需要判断token是否存在,是否过期;在后台返回结果后,需要根据不同的返回状态的给出不同的提示。当时,项目基本上都已经写完了,几十个接口,每个接口请求前后都要添加一个方法,感觉超级麻烦额,为了偷懒,我竟然神奇的想到了使用全局方法。

    先在main.js中定义两个全局然后在每个请求前后分别调用这两个全局方法,我真的是每个请求都有加:

    请求拦截

     大概是半年后吧,自我感觉能比较熟练的使用vue做项目了,才想起来认真看一下官方文档,这个才发现了有请求拦截这么好用的东东。。。

    一直都是用的axios,之前都是直接在main.js中引入

    现在要做请求拦截,所以先在新建一个http.js文件,然后在http.js中引入axios然后暴露出去,再到main.js中引入http.js:

    http.js

    main.js

    再回到http.js中,因为我这里用到了一些其他的东西,比如后台地址变量sessiondate.add、本地存储的token,所以在前面还引入了一些其他的东西

     

    现在开始写请求前的拦截:判断是否有token,如果有,将token存入请求头部:

    这样,在后面每次请求的时候,不用再获取token什么的了。

    接下来就是写对返回结果的响应了:

    一次性处理多种情况,简单省事。

    上面的方式是token存储在cookie里面,但是也有很多时候,token是存在vuex里面的,然后在vuex里面再讲token存在本地:

    存储

    在http.js中使用

  • 相关阅读:
    Dataset、DataLoader、DataLoaderIter
    new和malloc区别,delete和delete []区别
    虚函数的调用一定是动态联编吗?
    sizeof操作符的一些例子
    虚基类的作用:消除二义性
    虚函数和纯虚函数和析构函数
    VS统计项目代码行数
    记录平时学习的内容并记录是否完成随笔记录一些资料
    C++中vector使用详细说明 (转)
    Git相关知识点
  • 原文地址:https://www.cnblogs.com/yuyujuan/p/10314382.html
Copyright © 2011-2022 走看看