Vue 拦截器对token过期处理方法

最近在做的一个项目，需要每个http请求下 都要添加token，这样无疑是增加了工作量。而vue 拦截器interceptors正好可以解决我们的需求。

Vue.http.interceptors.push(function (request, next) {//拦截器设置请求token

 // sessionStorage.getItem("tokenUrl");
 request.headers.set('token', sessionStorage.getItem("tokenVal"));
 if (request.url.indexOf(url) === -1) {
 request.url = url + request.url;
 }
 // continue to next interceptor
 next(function (response) {
 // ..if(response.body.code=="失败码")
{
parent.location.href="登录页面路径" rel="external nofollow" ;
}.
 // 请求发送后的处理逻辑
 // ...
 // 根据请求的状态，response参数会返回给successCallback或errorCallback
 return response
 });
});

以上这篇Vue 拦截器对token过期处理方法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。

您可能感兴趣的文章:

  • vue-resource 拦截器使用详解
  • vue中页面跳转拦截器的实现方法
  • Vue-resource拦截器判断token失效跳转的实例
赞 (0)

相关推荐

  • vue中页面跳转拦截器的实现方法

    本文主要给大家介绍的是关于vue页面跳转拦截器的相关内容,分享出来供大家参考学习,下面话不多说了,来一起看看详细的介绍: 登录拦截逻辑 第一步:路由拦截 首先在定义路由的时候就需要多添加一个自定义字段requireAuth,用于判断该路由的访问是否需要登录.如果用户已经登录,则顺利进入路由, 否则就进入登录页面.在路由管理页面添加meta字段 import Vue from 'vue' import Router from 'vue-router' Vue.use(Router) const r

  • Vue-resource拦截器判断token失效跳转的实例

    在拦截器中设置全局的token判断,意味着每次http请求都会校验token,与后台约定好的token过期返回码可以自定义跳转路径: var token = window.localStorage.getItem("token"); Vue.http.interceptors.push(function(request, next) { request.headers.set('token', token); //setting request.headers next(functio

  • vue-resource 拦截器使用详解

    在vue项目使用vue-resource的过程中,临时增加了一个需求,需要在任何一个页面任何一次http请求,增加对token过期的判断,如果token已过期,需要跳转至登录页面.如果要在每个页面中的http请求操作中添加一次判断,那么会是一个非常大的修改工作量.那么vue-resource是否存在一个对于任何一次请求响应捕获的的公共回调函数呢?答案是有的! vue-resource的interceptors拦截器的作用正是解决此需求的妙方.在每次http的请求响应之后,如果设置了拦截器如下,会

  • Vue 拦截器对token过期处理方法

    最近在做的一个项目,需要每个http请求下 都要添加token,这样无疑是增加了工作量.而vue 拦截器interceptors正好可以解决我们的需求. Vue.http.interceptors.push(function (request, next) {//拦截器设置请求token // sessionStorage.getItem("tokenUrl"); request.headers.set('token', sessionStorage.getItem("tok

  • vue中Axios添加拦截器刷新token的实现方法

    目录 1. Axios基本用法: 2. Axios基本封装用法: 3. 添加拦截器的用法 4. 注意事项: Axios是一款网络前端请求框架,基本用法如下: 1. Axios基本用法: const response = await Axios.create({ baseURL: "https://test.api.com", headers: { 'Content-Type': 'application/json', }, }).post<RequestResponse>(

  • vue拦截器实现统一token,并兼容IE9验证功能

    项目中使用vue搭建前端页面,并通过axios请求后台api接口,完成数据交互.如果验证口令token写在在每次的接口中,也是个不小的体力活,而且也不灵活.这里分享使用vue自带拦截器,给每次请求的头部添加token,而且兼容了IE9. import axios from 'axios'; // 这里的config包含每次请求的内容,在这里把token放到请求头 axios.interceptors.request.use(function (config) { let token = wind

  • vue拦截器Vue.http.interceptors.push使用详解

    vue拦截器Vue.http.interceptors.push使用详解

    刚开始学vue,github上down了一个开源项目,看源代码的时候看到了这个地方: /** * @export * @param {any} request * @param {any} next * @returns */ import store from './vuex/store' // 全局错误处理,全局loading import { setLoading, setTip } from './vuex/actions/doc_actions' export default func

  • Vue利用路由钩子token过期后跳转到登录页的实例

    在Vue2.0中的路由钩子主要是用来拦截导航,让它完成跳转或前取消,可以理解为路由守卫. 分为全局导航钩子,单个路由独享的钩子,组件内钩子. 三种 类型的钩子只是用的地方不一样,都接受一个函数作为参数,函数传入三个参数,分别为to,from,next. 其中next有三个方法 (1)next(); //默认路由 (2)next(false); //阻止路由跳转 (3)next({path:'/'}); //阻止默认路由,跳转到指定路径 这里我使用了组件内钩子进行判断token过期后跳转到登录页,

  • springboot拦截器过滤token,并返回结果及异常处理操作

    1.springboot 拦截器处理过滤token,并且返回结果 import org.apache.commons.lang3.StringUtils; import org.apache.shiro.subject.Subject; import org.springframework.lang.Nullable; import org.springframework.stereotype.Component; import org.springframework.web.servlet.H

  • Django中间件整合Vue拦截器的使用

    目录 axios拦截器是什么? 拦截器的使用 请求拦截器 响应拦截器 Django中间件token验证 中间件相关 自定义中间件 中间件的执行流程 用中间件进行登录认证 总结 axios拦截器是什么? axios拦截器可以拦截每一次的请求和响应,然后进行相应的处理.拦截器分为请求拦截器和响应拦截器,请求拦截器可以统一在你发送请求前在请求体里加上token:响应拦截器的话,是在接受到响应之后进行的一些操作,比如,服务器返回登录状态失效,需要重新登录的时候,就给它跳到登录页面: 拦截器的使用 我一般

  • Springmvc拦截器执行顺序及各方法作用详解

    实现HandlerInterceptor接口或者继承HandlerInterceptor的子类,比如Spring 已经提供的实现了HandlerInterceptor 接口的抽象类HandlerInterceptorAdapter ,下面讲实现其接口的写法,先看一下这个接口的三个方法. - 方法preHandle: 顾名思义,该方法将在请求处理之前进行调用,在controller之前执行.SpringMVC 中的Interceptor 是链式的调用的,在一个应用中或者说是在一个请求中可以同时存在

  • .NET中间件与VUE拦截器联合使用详情

    .NET中间件与VUE拦截器联合使用详情

    前言: 工作中遇见的问题,边学边弄,记录一下Vue的UI库使用的是antvue 3.2.9版本的. 业务逻辑 特性: //特性 public class ModelEsignNameAttribute : Attribute { public ModelEsignNameAttribute(string nameProp, string id, string reversion = "", ModelESignType eSignType = ModelESignType.Modeli

随机推荐