Vue 拦截器对token过期处理_拦截器判断token过期

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

1.  在vueresource情况下 设置token拦截器。

  Vue.http.interceptors.push(function (request, next) {
      let token = localStorage.getItem("x-auth-token");
      if (token) {
        request.headers.set('token', token);
      }
      if (request.url.indexOf(url) === -1) {/*增加时间标记，兼容IE*/
        let getTimestamp=new Date().getTime();
        if(request.url.indexOf('?')>-1){  
          request.url = url + request.url +"&timestamp="+getTimestamp;
        }else{
          request.url = url + request.url +"?timestamp="+getTimestamp;
        }
      }
      next(response => {
        if(response.body.code==-1&&response.status==200){
          this.$message({showClose: true, message:response.data.msg, type: 'warning'});
        };
        if (response.status >= 400) {/*在此处判断token过期，以及其他状态码设置跳转页面*/
          if (response.status === 401) {
            me.handleUnauthorized()
          } else if (response.status === 403) {
            me.handleForbidden()
          } else {
            me.handleServerError(response)
          }
        } else {
          if (response.data.code !== 0) {
            me.handleApiError(response)
          }
        }
        me.resetToken(response);
        return response
      });

2.如果使用的是axios情况是，设置token是下面的方法。

  axios.interceptors.request.use(/*这是拦截器设置tokne*/
      config => {
        let token = localStorage.getItem("x-auth-token");
     
        if (token) {  // 判断是否存在token，如果存在的话，则每个http header都加上token
          config.headers.token = `${token}`;
        }
        if (config.url.indexOf(url) === -1) {
          let getTimestamp=new Date().getTime();
          if(config.url.indexOf('?')>-1){
            config.url = url + config.url +"&timestamp="+getTimestamp;
          }else{
            config.url = url +config.url +"?timestamp="+getTimestamp;
          }
        }
        return config;
      },
      err => {
        alert(err)
        return Promise.reject(err);
      });

下面这张图是设置对于token过期的处理

 axios.interceptors.response.use(
      response => {/*在这里可以设置请求成功的一些设置*/
        let newToken=response.config.headers.token
        localStorage.setItem('x-auth-token', newToken);
        if(response.data.code==-1&&response.status==200){
          this.$message({showClose: true, message:response.data.msg, type: 'warning'});
        };
        return response;
      },
      error => {/*在这里设置token过期的跳转*/
        if (error.response) {
          if(error.response.data.code==401){
            this.$router.push('/login');
          }
        }
      });

如果有哪里遗漏了请各位在下面留言都会回复