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(function(response){
    if(response.body.code===401){ //与后台约定登录失效的返回码
      parent.location.href ='/login.html';
    }
    return response
  })
})

以上这篇Vue-resource拦截器判断token失效跳转的实例就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • vue-resource 拦截器（interceptor）的使用详解

    拦截器-interceptor 在现代的一些前端框架上,拦截器基本上是很基础但很重要的一环,比如Angular原生就支持拦截器配置,VUE的Axios模块也给我们提供了拦截器配置,那么拦截器到底是什么,它有什么用? 拦截器能帮助我们解决的 1.添加统一的request的参数 比如header中加入X-Requested-With,比如客户端需要实现sign和token的验证机制,比如你可以写$http.get('/files', params),拦截器帮你拼接成 http://www.xxxx.

  • vue-resource 拦截器使用详解

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

  • 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 拦截器对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的案例

    需求 要想统一处理所有http请求和响应,就得用上 axios 的拦截器.通过配置 http response inteceptor ,当后端接口返回 401 Unauthorized(未授权) ,让用户重新登录. 通过这个项目学习如何实现一个前端项目中所需要的 登录及拦截.登出.token失效的拦截及对应 axios 拦截器的使用. 代码如下: const instance = axios.create({ baseURL: 'http://www.laravel5.5.com/api/',

  • 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 axios拦截器常用之重复请求取消

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

  • 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

  • springboot使用拦截器判断是否登录

    springboot使用拦截器判断是否登录

    目录 springboot拦截器判断是否登录 实现拦截器的两个步骤 1.自定义拦截器 2.自定义配置类继承WebMvcConfigurerAdapter springboot 增加拦截器判断是否登录 1.创建拦截器 2.继承WebMvcConfigureAdapter类 3.LoginController 4.未登录会自动跳转到登录页面 springboot拦截器判断是否登录 实现拦截器的两个步骤 自定义拦截器实现HandlerInterceptor接口 创建一个配置类继承WebMvcConfi

  • springboot Interceptor拦截器excludePathPatterns忽略失效

    springboot Interceptor拦截器excludePathPatterns忽略失效

    springboot Interceptor拦截器excludePathPatterns忽略失效 excludePathPatterns方法是排除访问路径,但是当你排除的url路径在项目中并不存在的时候,springboot会将路径编程/error,从而无法进行排除. 例如下面代码: registry.addInterceptor(new MyInterceptor()).addPathPatterns("/**").excludePathPatterns("/login&q

  • MyBatis拦截器:给参数对象属性赋值的实例

    该拦截器的作用:在进行增加.修改等操作时,给数据模型的一些通用操作属性(如:创建人.创建时间.修改人.修改时间等)自动赋值. 该实现是在DAO层拦截,即存入DB前最后一层.后经分析,不是很合理,改为在service层拦截,用spring AOP来实现了,该代码遂弃用.不过已经测试可用,记录备忘. package com.development; import java.lang.reflect.InvocationTargetException; import java.util.Date; i

  • vue 请求拦截器的配置方法详解

    vue 请求拦截器的配置方法详解

    按如下步骤进行 1.request.js内容:http request请求拦截器和http response服务器响应拦截器配置 2.http.js内容:请求数据方式封装 3.utils.js内容:获取token,判断token是否存在 4.store文件: vuex 仓库配置 vuex 持久化 vuex 模板引用 5.接口的封装 目录 request.js内容 http request请求拦截器和http response服务器响应拦截器配置 // http request 请求拦截器,有to

随机推荐