对于vue中axios拦截器简单封装
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拦截器简单封装的更多相关文章
- vue axios拦截器的封装
// request.js import axios from 'axios' import qs from 'qs' // 创建axios实例 const service = axios.creat ...
- vue中axios的使用与封装
分享下我自己的axios封装axios是个很好用的插件,都是一些params对象,所以很方便做一些统一处理 当然首先是npm安装axios 很简单$ npm install axios --save在 ...
- vue中axios的二次封装
我们做项目时,虽然axios也可以直接拿来用,但是对接口比较零散,不太好进行维护,也会产生大量的重复代码,所以我在这对axios进行了统一接口处理 第一步,先在src中的公共文件夹中如utils里新建 ...
- Vue2学习小记-给Vue2路由导航钩子和axios拦截器做个封装
1.写在前面 最近在学习Vue2,遇到有些页面请求数据需要用户登录权限.服务器响应不符预期的问题,但是总不能每个页面都做单独处理吧,于是想到axios提供了拦截器这个好东西,再于是就出现了本文. 2. ...
- vue axios拦截器 + 自编写插件 实现全局 loading 效果;
项目需求:用自定义的 .gif 图标实现全局 loading 效果:为避免在每个页面手动添加,且简单高效的实现,经查阅资料,最终采用了 vue axios拦截器 + 自编写 loading 插件:下面 ...
- 聊聊 Vue 中 axios 的封装
聊聊 Vue 中 axios 的封装 axios 是 Vue 官方推荐的一个 HTTP 库,用 axios 官方简介来介绍它,就是: Axios 是一个基于 promise 的 HTTP 库,可以用在 ...
- Vue中axios的封装和api接口的统一管理
更新的是我csdn上的文章,需要的话可以看下,互相学习点击去我的csdn vue中axios的封装 在vue项目和后端交互获取数据时,通常使用axios库,官方文档:https://www.npmjs ...
- vue --- axios拦截器+form格式请求体
在vue2.x中使用CLI生成的模板有很大改变,需要自己手动在main.ts同级目录下新建interceptors.ts interceptors.ts import axios from 'axio ...
- Vue基于vuex、axios拦截器实现loading效果及axios的安装配置
准备 利用vue-cli脚手架创建项目 进入项目安装vuex.axios(npm install vuex,npm install axios) axios配置 项目中安装axios模块(npm in ...
随机推荐
- linux中c语言和php语言通信代码UDP&TCP
linux中c语言和php语言通信代码UDP&TCP http://blog.chinaunix.net/uid-24015214-id-2644174.html UDP方式通信 服务器端 ...
- 安装ORACLE服务出现Oracle Net Configuration Assistant 失败问题【我】
安装ORACLE服务出现Oracle Net Configuration Assistant 失败问题 本地安装oracle11g,报错提示: 参考下面文章: 报错原因: 主要是对文件系统的访问权限问 ...
- 十九款web漏洞扫描工具
1. Arachni Arachni是一款基于Ruby框架搭建的高性能安全扫描程序,适用于现代Web应用程序.可用于Mac.Windows及Linux系统的可移植二进制文件. Arachni不仅能对基 ...
- ByteBuf使用实例
之前我们有个netty5的拆包解决方案(参加netty5拆包问题解决实例),现在我们采用另一种思路,不需要新增LengthFieldBasedFrameDecoder,直接修改NettyMessage ...
- 详细介绍Oracle数据库的聚簇技术
作者:☜ Tracy ☞ 1. 什么是聚簇 d1=A=: 聚簇是根据码值找到数据的物理存储位置,从而达到快速检索数据的目的.聚簇索引的顺序就是数据的物理存储顺序,叶节点就是数据节点.非聚簇索引的顺序与 ...
- Python - Django - simple_tag 和 inclusion_tag
simple_tag: simple_tag 和自定义 filter 类似,但可以接收更多更灵活的参数 在 app01/templatetags/ 目录下创建 mysimple_tag.py mysi ...
- SignalR 传Model类型的参数
目录 集线器方法 js调用 集线器方法 集线器写了一个方法是这样的 public void test(string name, Customer customer) 第一个参数是string类型的,第 ...
- Docker快速入门——Docker-Compose
一.Docker-Compose简介 1.Docker-Compose简介 Docker-Compose项目是Docker官方的开源项目,负责实现对Docker容器集群的快速编排.Docker-Com ...
- ibatis 参数 指定类型
文档: http://ibatis.apache.org/docs/dotnet/datamapper/ch03s04.html <update id="UpdateAccountVi ...
- CEIWEI USBMonitor USB监控精灵 v2.3.2 USB过滤驱动 USB监控
CEIWEI USBMonitor USB监控精灵 是一款监控USB端口协议分析软件,用于监控和分析USB设备协议,可以拦截.记录USB软件程序操作USB设备的In.Out数据包.支持监控分析USB票 ...