axios全局请求参数设置,请求及返回拦截器的方法

应用场景：

1，每个请求都带上的参数，比如token，时间戳等。

2，对返回的状态进行判断，比如token是否过期

代码如下：

axios.interceptors.request.use(
		config => {
			var xtoken = getXtoken()
			if(xtoken != null){
				config.headers['X-Token'] = xtoken
			}
			if(config.method=='post'){
				config.data = {
					...config.data,
					_t: Date.parse(new Date())/1000,
				}
			}else if(config.method=='get'){
				config.params = {
					_t: Date.parse(new Date())/1000,
					...config.params
				}
			}
			return config
		},function(error){
			return Promise.reject(error)
		}
	)
axios.interceptors.response.use(function (response) {
	// token 已过期，重定向到登录页面
	if (response.data.code == 4){
		localStorage.clear()
		router.replace({
            path: '/signin',
            query: {redirect: router.currentRoute.fullPath}
          })
	}
	return response
}, function (error) {
	// Do something with response error
	return Promise.reject(error)
})

以上这篇axios全局请求参数设置,请求及返回拦截器的方法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。

您可能感兴趣的文章:

  • axios拦截设置和错误处理方法
  • Vue+axios 实现http拦截及路由拦截实例
  • vue+axios实现登录拦截的实例代码
赞 (0)

相关推荐

  • axios拦截设置和错误处理方法

    现在vue的官方包已经不更新vue-resource了,转而推荐axios,下面是项目实战是总结的axios插件设置: /** * @file Axios的Vue插件(添加全局请求/响应拦截器) */ // https://github.com/mzabriskie/axios import axios from 'axios' // 拦截request,设置全局请求为ajax请求 axios.interceptors.request.use((config) => { config.heade

  • Vue+axios 实现http拦截及路由拦截实例

    现如今,每个前端对于Vue都不会陌生,Vue框架是如今最流行的前端框架之一,其势头直追react.最近我用vue做了一个项目,下面便是我从中取得的一点收获. 基于现在用vue+webpack搭建项目的文档已经有很多了,我就不再累述了. 技术栈 vue2.0 vue-router axios 拦截器 首先我们要明白设置拦截器的目的是什么,当我们需要统一处理http请求和响应时我们通过设置拦截器处理方便很多. 这个项目我引入了element ui框架,所以我是结合element中loading和me

  • vue+axios实现登录拦截的实例代码

    一个项目学会vue全家桶+axios实现登录.拦截.登出功能,以及利用axios的http拦截器拦截请求和响应. 前言 该项目是利用了Github 提供的personal token作为登录token,通过token访问你的Repository List.通过这个项目学习如何实现一个前端项目中所需要的 登录及拦截.登出.token失效的拦截及对应 axios 拦截器的使用. 准备你需要先生成自己的 Github Personal Token( 生成Token). Token 生成后 访问Demo

  • axios全局请求参数设置,请求及返回拦截器的方法

    应用场景: 1,每个请求都带上的参数,比如token,时间戳等. 2,对返回的状态进行判断,比如token是否过期 代码如下: axios.interceptors.request.use( config => { var xtoken = getXtoken() if(xtoken != null){ config.headers['X-Token'] = xtoken } if(config.method=='post'){ config.data = { ...config.data, _

  • spring boot设置过滤器、监听器及拦截器的方法

    前言 其实这篇文章算不上是springboot的东西,我们在spring普通项目中也是可以直接使用的 设置过滤器: 以前在普通项目中我们要在web.xml中进行filter的配置,但是只从servlet 3.0后,我们就可以在直接在项目中进行filter的设置,因为她提供了一个注解@WebFilter(在javax.servlet.annotation包下),使用这个注解我们就可以进行filter的设置了,同时也解决了我们使用springboot项目没有web.xml的尴尬,使用方法如下所示 @

  • Spring MVC请求参数与响应结果全局加密和解密详解

    Spring MVC请求参数与响应结果全局加密和解密详解

    前提 前段时间在做一个对外的网关项目,涉及到加密和解密模块,这里详细分析解决方案和适用的场景.为了模拟真实的交互场景,先定制一下整个交互流程.第三方传输(包括请求和响应)数据报文包括三个部分: 1.timestamp,long类型,时间戳. 2.data,String类型,实际的业务请求数据转化成的Json字符串再进行加密得到的密文. 3.sign,签名,生成规则算法伪代码是SHA-256(data=xxx&timestamp=11111),防篡改. 为了简单起见,加密和解密采用AES,对称秘钥

  • vue axios拦截器常用之重复请求取消

    引言 上一篇介绍了axios的简单封装,知道了axios拦截器的应用场景和方法,今天来看一下对于响应时间过长且请求次数过高的情况拦截器如何处理. 取消请求的方法 Axios使用内部提供的CancelToken来取消请求 官网示例1:用CancelToken.source工厂方法创建 cancel token,像这样 const CancelToken = axios.CancelToken; const source = CancelToken.source(); axios.get('/use

  • java模拟http的Get/Post请求,并设置ip与port代理的方法

    本文涉及3个基本点: 1.因为很多公司的内网都设有代理,浏览器通过ip与port上网,而java代码模拟http get方式同样需要外网代理: 2.Java实现http的Get/Post请求代码: 3.主要是设置HttpURLConnection请求头里面的属性 比如Cookie.User-Agent(浏览器类型)等等. 比如:http请求中添加Header conn.setRequestProperty("Authorization", authorization); 注:我就在网上

  • 学习SpringMVC——如何获取请求参数详解

    学习SpringMVC——如何获取请求参数详解

    @RequestParam,你一定见过:@PathVariable,你肯定也知道:@QueryParam,你怎么会不晓得?!还有你熟悉的他(@CookieValue)!她(@ModelAndView)!它(@ModelAttribute)!没错,仅注解这块,spring mvc就为你打开了五彩斑斓的世界.来来来,不要兴(mi)奋(hu),坐下来,我们好好聊聊这么些个注解兄弟们~~~(wait, 都没有听过? 好,来,你坐前排,就你!)  一.spring mvc如何匹配请求路径--"请求路径哪家

  • SpringBoot拦截器如何获取http请求参数

    SpringBoot拦截器如何获取http请求参数

    1.1.获取http请求参数是一种刚需 我想有的小伙伴肯定有过获取http请求的需要,比如想 前置获取参数,统计请求数据 做服务的接口签名校验 敏感接口监控日志 敏感接口防重复提交 等等各式各样的场景,这时你就需要获取 HTTP 请求的参数或者请求body,一般思路有两种,一种就是自定义个AOP去拦截目标方法,第二种就是使用拦截器.整体比较来说,使用拦截器更灵活些,因为每个接口的请求参数定义不同,使用AOP很难细粒度的获取到变量参数,本文主线是采用拦截器来获取HTTP请求. 1.2.定义拦截器获

  • 详解Retrofit Interceptor(拦截器) 拦截请求并做相关处理

    本文介绍Retrofit拦截器(Interceptor)的使用方法及相关注意事项.如果本文对您有所帮助,烦请点亮小红心- 首先看一下Interceptor源码: /** * Observes, modifies, and potentially short-circuits requests going out and the corresponding * responses coming back in. Typically interceptors add, remove, or tran

  • Vue 前端实现登陆拦截及axios 拦截器的使用

    该项目是利用了Github 提供的personal token作为登录token,通过token访问你的Repository List.通过这个项目学习如何实现一个前端项目中所需要的 登录及拦截.登出.token失效的拦截及对应 axios 拦截器的使用. 准备 你需要先生成自己的 Github Personal Token( 生成Token). Token 生成后 访问 Demo,即可查看你的Repository List. 项目结构 ├── README.md ├── dist // 打包构

  • vue 导航守卫和axios拦截器有哪些区别

    vue 导航守卫和axios拦截器有哪些区别

    在Vue项目中,有两种用户登录状态判断并处理的情况,分别为:导航守卫和axios拦截器. 一.什么是导航守卫? vue-router 提供的导航守卫主要用来通过跳转或取消的方式守卫导航.(在路由跳转时触发) 我们主要介绍的是可以验证用户登录状态的全局前置守卫,当一个导航触发时,全局前置守卫按照创建顺序调用.守卫是异步解析执行,此时导航在所有守卫 resolve 完之前一直处于等待中. const router = new VueRouter({ ... })   router.beforeEac

随机推荐