美文网首页
vue-resourse全局设置拦截器居然这样使用,一刷新请求的

vue-resourse全局设置拦截器居然这样使用,一刷新请求的

作者: jialing_cccwei | 来源:发表于2017-12-15 19:26 被阅读0次

    因为需要进行登录判定,需要在任何一个页面任何一次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)
    })```

    相关文章

      网友评论

          本文标题:vue-resourse全局设置拦截器居然这样使用,一刷新请求的

          本文链接:https://www.haomeiwen.com/subject/pandwxtx.html