对于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 ...
随机推荐
- ISO/IEC 9899:2011 条款6.5.10——按位与操作符
6.5.10 按位与操作符 语法 1.AND-expression: equality-expression AND-expression equality-expression 约束 2.这些 ...
- [redis]带密码的客户端连接方法
客户端连接方法: redis-cli -h localhost -p 6380 提供host为localhost,端口为6380 带密码的客户端连接方法一: redis-cli -h localh ...
- k8s记录-ntpd时间同步配置(五)
1)服务端配置 在192.168.0.1 root用户下操作 yum install -y ntp ntpdate 修改etc/ntp.conf 注释所有的server和restrict 加入: se ...
- python 判断文件是否存在和删除文件的api (其中判断文件在不在让想起这个可以强兼容jenkins工作目录那个问题)
判断文件在不在的api: os即operating system(操作系统),Python 的 os 模块封装了常见的文件和目录操作. os.path模块主要用于文件的属性获取,exists是“存在” ...
- 转Python 爬虫入门实战
转自:https://www.cnblogs.com/babycomeon/p/11651888.html
- 客户端业务层(非数据层json或xml层)的数据结构
private string errorMessage = "系统繁忙,请稍后重试";//不成功时的提示信息:成功时,可以忽略掉 private int result ...
- vue 静态资源文件夹src下的assets 和static的区别
static下的静态资源在项目打包的时候,直接在dist文件夹下直接把static文件夹打包进去src下的assets,在打包时,vue是按照模块来引入里面的静态资源,一般使用这种方式
- Ubuntu18使用netplan设置多网口绑定
Ubuntu18使用netplan设置网络参考:https://www.cnblogs.com/minseo/p/11325384.html 修改配置文件 /etc/netplan/50-cloud- ...
- C# .NET 判断输入的字符串是否只包含数字和英文字母
FROM : https://www.cnblogs.com/ilookbo/p/4828722.html /// <summary> /// 判断输入的字符串是否只包含数字和英文字母 ...
- 安装Windows和Ubuntu双系统2
安装Windows和Ubuntu双系统 0.552016.12.10 15:54:41字数 2101阅读 6644 这几天开始动手做毕设啦,打算好好过把Linux瘾,接下来便是这两天我在联想电脑上安装 ...