对于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 ...
随机推荐
- Dart函数方法
/* 内置方法/函数: print(); 自定义方法: 自定义方法的基本格式: 返回类型 方法名称(参数1,参数2,...){ 方法体 return 返回值; } */ void printInfo( ...
- Python - Django - 页面上展示固定的页码数
如果页数太多的话,全部显示在页面上就会显得很冗杂 可以在页面中显示规定的页码数 例如: book_list.html: <!DOCTYPE html> <html lang=&quo ...
- linux用户解锁
pam_tally2 --user=username #查看 pam_tally2 --user=username --reset #重置
- mysql.yaml
[root@lab2 mysql]# cat mysql.yaml apiVersion: extensions/v1beta1 kind: Deployment metadata: name: my ...
- laravel5.1框架model类查询实现
laravel框架model类查询实现: User::where(['uid'=8])->get(); User类继承自Model类:Illuminate\Database\Eloquent\M ...
- idea使用快捷键ALT+/的时候,本来想在new后面创建对象,结果又出来一个new
我们知道eclipse的自动提示补齐new 后面的对象的快捷键是ALT+/,当我使用idea的时候,把idea的快捷键换成了eclipse的风格. 然而当我按下ALT+/的时候,就给我自动输入了一个n ...
- K8S - 容器编排工具Kubernetes简介
1 - Kubernetes Kubernetes(简称K8s,用8代替8个字符"ubernete")是Google开源的一个容器编排引擎. 目前最为广泛且流行的容器编排调度系统, ...
- web端自动化——自动化测试准备工作
准备工作# 在开始自己项目的自动化测试之前,我们最好已经完成了下面的准备工作: 1.熟悉待测系统 对项目的待测系统整体功能和业务逻辑有比较清晰的认识. 2.编写系统的自动化测试用例大纲和自动化测试用例 ...
- matlab绘制直方图的方法
直接上代码,利用hist绘制频次直方图和频率直方图... %rand Fs=1000;N=10000; t=0:1/Fs:(N-1)/Fs; X1=rand(1,length(t)); subplot ...
- 字段自动递增的数据库建表的SQL写法
数据库建表的SQL写法如下: 数据库建表的SQL写法如下: create table dataC( a int identity(1,2) primary key, b varchar(20)) ...