vue-resourse全局设置拦截器居然这样使用,一刷新请求的数据就没有啦

因为需要进行登录判定,需要在任何一个页面任何一次http请求,增加对token的判断,如果token已过期或者不存在,需要跳转至登录页面。设置全局拦截器就可以一次性实现这个需要;在登录页请求的时候,将token放到sessionStorage;在main.js写上以下代码:

newVue({
  el:'#app',
  router,
  render:h=>h(App)
})
Vue.http.interceptors.push((request,next)=>{
  // 登录成功后将后台返回的TOKEN在本地存下来,每次请求从sessionStorage中拿到存    储的TOKEN值
  let TOKEN=sessionStorage.getItem('token');
  if(TOKEN){
  // 如果请求时TOKEN存在,就为每次请求的headers中设置好TOKEN,后台根据headers中的TOKEN判断是否放行
    request.headers.set('token',TOKEN);
  }
   next((response)=>{
     if(response.body.code===10010){//与后台约定登录失效的返回码
       let data=response.body.data
       window.location.href=data
     }
  return response;
  })
})

但是,这样设置拦截器的话,一刷新界面,就会出现问题了,请求的数据出不来,拦截器函数根本就进不去,token拿不到,咦,这怎么办,嘿嘿,把拦截器函数放到实例上面就可以了,先让拦截器执行哟:

Vue.http.interceptors.push((request,next)=>{
  // 登录成功后将后台返回的TOKEN在本地存下来,每次请求从  sessionStorage中拿到存储的TOKEN值
  let TOKEN=sessionStorage.getItem('token');
if(TOKEN){
 // 如果请求时TOKEN存在,就为每次请求的headers中设置好TOKEN,后台根据headers中的TOKEN判断是否放行
 request.headers.set('token',TOKEN);
}
 next((response)=>{
  if(response.body.code===10010){//与后台约定登录失效的返回码
    var data=response.body.data
    window.location.href=data
  }
  return response;
 })
})
newVue({
 el:'#app',
 router,
 render:h=>h(App)
})```
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • iOS网络架构讨论梳理整理中。。。 其实如果没有APIManager这一层是没法使用delegate的,毕竟多个单...
    yhtang阅读 5,330评论 1 23
  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 135,258评论 19 139
  • 拦截器是Struts2框架的核心,它主要完成解析请求参数、将请求参数赋值给Action属性、执行数据校验、文件上传...
    重山杨阅读 4,016评论 2 13
  • 有时候发现其实最不了解自己的还是自己
    倒影年华i阅读 182评论 0 0
  • 道冲而用之,或不盈。渊乎似万物之宗;挫其锐,解其纷;和其光,同其尘;湛兮似或存。吾不知谁之子,象帝之先。 解释:...
    冰火两重天1116阅读 135评论 0 0