axios.interceptors.response.use(
  response => {
  // 如果返回的状态码为200,说明接口请求成功,可以正常拿到数据
  // 否则的话抛出错误
  if (response.status === 200) {
    if (response.headers.x_auth_token) {
      localStorage.setItem('x_auth_token', response.headers.x_auth_token); // 存储token
    }
  } else {
    return Promise.reject(response);
  }
},
error => {
  if (error.response.status) {
    switch (error.response.status) {
      // 401: 未登录
      case 401:
        break;
      // 403: token过期
      case 403:
        break;
      // 404:请求不存在
      case 404:
        break;
      default:
        alert(error.response.data.message);
    }
    return Promise.reject(error.response);
  }
}) axios 请求拦截器
axios.interceptors.request.use(
  config => {
    // 每次发送请求之前判断vuex中是否存在tocken
    // 如果存在,则统一在http请求的header都加上tocken,这样后台根据tocken判断你的登录情况
    // 即使本地存在token,也有可能token是过期的,所以在响应拦截器中要对返回状态进行判断
    const token = localStorage.getItem('x_auth_token');
    token && (config.headers.x_auth_token = token);
    return config;
  },
  error => {
    return Promise.error(error);
  }
)

  

对于vue中axios拦截器简单封装的更多相关文章

  1. vue axios拦截器的封装

    // request.js import axios from 'axios' import qs from 'qs' // 创建axios实例 const service = axios.creat ...

  2. vue中axios的使用与封装

    分享下我自己的axios封装axios是个很好用的插件,都是一些params对象,所以很方便做一些统一处理 当然首先是npm安装axios 很简单$ npm install axios --save在 ...

  3. vue中axios的二次封装

    我们做项目时,虽然axios也可以直接拿来用,但是对接口比较零散,不太好进行维护,也会产生大量的重复代码,所以我在这对axios进行了统一接口处理 第一步,先在src中的公共文件夹中如utils里新建 ...

  4. Vue2学习小记-给Vue2路由导航钩子和axios拦截器做个封装

    1.写在前面 最近在学习Vue2,遇到有些页面请求数据需要用户登录权限.服务器响应不符预期的问题,但是总不能每个页面都做单独处理吧,于是想到axios提供了拦截器这个好东西,再于是就出现了本文. 2. ...

  5. vue axios拦截器 + 自编写插件 实现全局 loading 效果;

    项目需求:用自定义的 .gif 图标实现全局 loading 效果:为避免在每个页面手动添加,且简单高效的实现,经查阅资料,最终采用了 vue axios拦截器 + 自编写 loading 插件:下面 ...

  6. 聊聊 Vue 中 axios 的封装

    聊聊 Vue 中 axios 的封装 axios 是 Vue 官方推荐的一个 HTTP 库,用 axios 官方简介来介绍它,就是: Axios 是一个基于 promise 的 HTTP 库,可以用在 ...

  7. Vue中axios的封装和api接口的统一管理

    更新的是我csdn上的文章,需要的话可以看下,互相学习点击去我的csdn vue中axios的封装 在vue项目和后端交互获取数据时,通常使用axios库,官方文档:https://www.npmjs ...

  8. vue --- axios拦截器+form格式请求体

    在vue2.x中使用CLI生成的模板有很大改变,需要自己手动在main.ts同级目录下新建interceptors.ts interceptors.ts import axios from 'axio ...

  9. Vue基于vuex、axios拦截器实现loading效果及axios的安装配置

    准备 利用vue-cli脚手架创建项目 进入项目安装vuex.axios(npm install vuex,npm install axios) axios配置 项目中安装axios模块(npm in ...

随机推荐

  1. linux中c语言和php语言通信代码UDP&TCP

    linux中c语言和php语言通信代码UDP&TCP http://blog.chinaunix.net/uid-24015214-id-2644174.html UDP方式通信   服务器端 ...

  2. 安装ORACLE服务出现Oracle Net Configuration Assistant 失败问题【我】

    安装ORACLE服务出现Oracle Net Configuration Assistant 失败问题 本地安装oracle11g,报错提示: 参考下面文章: 报错原因: 主要是对文件系统的访问权限问 ...

  3. 十九款web漏洞扫描工具

    1. Arachni Arachni是一款基于Ruby框架搭建的高性能安全扫描程序,适用于现代Web应用程序.可用于Mac.Windows及Linux系统的可移植二进制文件. Arachni不仅能对基 ...

  4. ByteBuf使用实例

    之前我们有个netty5的拆包解决方案(参加netty5拆包问题解决实例),现在我们采用另一种思路,不需要新增LengthFieldBasedFrameDecoder,直接修改NettyMessage ...

  5. 详细介绍Oracle数据库的聚簇技术

    作者:☜ Tracy ☞ 1. 什么是聚簇 d1=A=: 聚簇是根据码值找到数据的物理存储位置,从而达到快速检索数据的目的.聚簇索引的顺序就是数据的物理存储顺序,叶节点就是数据节点.非聚簇索引的顺序与 ...

  6. Python - Django - simple_tag 和 inclusion_tag

    simple_tag: simple_tag 和自定义 filter 类似,但可以接收更多更灵活的参数 在 app01/templatetags/ 目录下创建 mysimple_tag.py mysi ...

  7. SignalR 传Model类型的参数

    目录 集线器方法 js调用 集线器方法 集线器写了一个方法是这样的 public void test(string name, Customer customer) 第一个参数是string类型的,第 ...

  8. Docker快速入门——Docker-Compose

    一.Docker-Compose简介 1.Docker-Compose简介 Docker-Compose项目是Docker官方的开源项目,负责实现对Docker容器集群的快速编排.Docker-Com ...

  9. ibatis 参数 指定类型

    文档: http://ibatis.apache.org/docs/dotnet/datamapper/ch03s04.html <update id="UpdateAccountVi ...

  10. CEIWEI USBMonitor USB监控精灵 v2.3.2 USB过滤驱动 USB监控

    CEIWEI USBMonitor USB监控精灵 是一款监控USB端口协议分析软件,用于监控和分析USB设备协议,可以拦截.记录USB软件程序操作USB设备的In.Out数据包.支持监控分析USB票 ...