vue 拦截器使用

一，背景，

axios 是一个基于Promise 用于浏览器和 nodejs 的 HTTP 客户端，它本身具有以下特征：

从浏览器中创建 XMLHttpRequest
从 node.js 发出 http 请求
支持 Promise API
拦截请求和响应
转换请求和响应数据
取消请求
自动转换JSON数据
客户端支持防止 CSRF/XSR

二，场景

每次都要在请求中加入，token ，判断是否登陆，如果vue系统中，所有的请求都加入token，比较麻烦，

有没有，每次发送求加入，vue 提供了一种方法，拦截器

三，使用与配置

在config 中，加入 axios.js

import axios from 'axios'// 配置默认的host,假如你的API host是：http://api.htmlx.club// 添加请求拦截器
axios.interceptors.request.use(function (config) {// 在发送请求之前做些什么
if (window.localStorage.getItem('access-token')) {config.headers.Authorization = window.localStorage.getItem('access-token');
}
console.log(window.localStorage.getItem('access-token'));return config
}, function (error) {// 对请求错误做些什么
return Promise.reject(error)
});// 添加响应拦截器
axios.interceptors.response.use(function (response) {// 对响应数据做点什么return response
}, function (error) {// 对响应错误做点什么return Promise.reject(error)
});

四，在 main.js 加入配置

import axios from 'axios';
import '../config/axios'
Vue.prototype.$ajax = axios

vue 拦截器使用相关推荐

Vue 拦截器原理和详细使用
拦截器原理和作用首先拦截器在src/utils/request.js 文件中,拦截器分为请求拦截器和响应拦截器. 页面中的每一个请求都会经过请求拦截和响应拦截,所以一般在这个文件进行操作. 这一文件 ...
.NET中间件以及VUE拦截器联合使用
.NET中间件以及VUE拦截器联合使用工作中遇见的问题,边学边弄,记录一下 Vue的UI库使用的是antvue 3.2.9版本的. 业务逻辑特性 //特性public class ModelEsi ...
Vue 拦截器对token过期处理
最近在做的一个项目,需要每个http请求下都要添加token,这样无疑是增加了工作量.而vue 拦截器interceptors正好可以解决我们的需求. 1. 在vueresource情况下设置t ...
vue拦截器实现统一token,并兼容IE9验证
项目中使用vue搭建前端页面,并通过axios请求后台api接口,完成数据交互.如果验证口令token写在在每次的接口中,也是个不小的体力活,而且也不灵活.这里分享使用vue自带拦截器,给每次请求的头 ...
vue拦截器刷新登陆页面_Vue + Spring Boot 项目实战（六）：前端路由与登录拦截器-Go语言中文社区...
前言这一篇主要讲前端路由与登录拦截器的实现.放在一起讲是因为我在开发登录拦截器时因为这个路由的问题遇到了很多坑,花费了很长时间,网上的解决方案都不怎么靠谱,综合了好几种办法才最终成功,其实关于这个部 ...
vue拦截器设置请求头失败，laravel设置前端请求头跨域
前端同事在vue的request里面的拦截器中设置请求头,发现'Authorization'可以正常添加到请求头,可以正常访问,但是添加其他的如'browserVersion'参数就不行, 会出现Re ...
vue拦截器的使用（萌新怕不懂的看过来）
由于我是第一次使用这个东西,我看到拦截器这个高大上的名字就感觉到害怕,所以做了这么多项目也怕接触这个东西,现在想到接口要进行处理,并且集中放置,所以利用了最近刚学的番茄时钟工作法,开了一个番茄,告诉自 ...
Vue 拦截器的使用
本文转载自: https://www.cnblogs.com/lhl66/p/8022823.html 作者:lhl66 转载请注明该声明. 拦截器可以全局进行拦截器设置.拦截器在发送请求前或响应返 ...
vue 拦截器，增加token参数
1.使用请求拦截器,拦截vue所有请求,增加token参数使用倒数计时,假如token有效期60分钟,会在59分钟的时候去重新拿着refresh_Token,去请求新的token. 注意:如果一个账 ...

vue 拦截器使用

vue 拦截器使用相关推荐

最新文章

热门文章