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. 004-行为型-08-状态模式(State)

    一.概述 允许一个对象在其内部状态改变时,改变它的行为 在状态模式中,我们创建表示各种状态的对象和一个行为随着状态对象改变而改变的 context 对象. 注意事项:在行为受状态约束的时候使用状态模式 ...

  2. JS中search查找某些内容,正则表达式|查找分隔的任何项

    JS中可以用indexOf来查找某个字符串里的某些内容的索引,也就是在字符串的位置.如果存在该字符串,会返回该字符串的索引,如果不存在会返回-1,可以通过某些内容的索引是否为-1判断是否存在该字符串. ...

  3. 【Leetcode_easy】888. Fair Candy Swap

    problem 888. Fair Candy Swap solution: class Solution { public: vector<int> fairCandySwap(vect ...

  4. 原生JavaScript常用本地浏览器存储方法二(cookie)

    JavsScript Cookie概述 cookie是浏览器提供的一种机制,它将document对象的cookie属性提供给JavaScript.可以由JavaScript对其进行控制,而并不是Jav ...

  5. robot:截图关键字

    参考: https://www.cnblogs.com/hong-fithing/p/9656221.html--python https://blog.csdn.net/weixin_4315628 ...

  6. mysql left join 右表数据不唯一的情况解决方法

    mysql left join 右表数据不唯一的情况解决方法 <pre>member 表id username1 fdipzone2 terry member_login_log 表id ...

  7. Keras中图像维度介绍

    报错问题: ValueError: Negative dimension size caused by subtracting 5 from 1 for 'conv2d_1/convolution' ...

  8. 爬虫探索Chromedriver+Selenium初试

    今天分享Python使用Chromedriver+Selenium爬虫的的方法,Chromedriver是一个有意思的爬虫插件,这个插件的爬虫方式主要是完全模拟浏览器点击页面,一步一步去找你要的东西, ...

  9. PAT(B) 1049 数列的片段和(C)规律

    题目链接:1049 数列的片段和 (20 point(s)) 题目描述 给定一个正数数列,我们可以从中截取任意的连续的几个数,称为片段.例如,给定数列 { 0.1, 0.2, 0.3, 0.4 },我 ...

  10. PAT(B) 1089 狼人杀-简单版(Java)逻辑推理

    题目链接:1089 狼人杀-简单版 (20 point(s)) 题目描述 以下文字摘自<灵机一动·好玩的数学>:"狼人杀"游戏分为狼人.好人两大阵营.在一局" ...