韦德国际1946英国 > 计算机网络 > 计算机网络:vue拦截器实现统一token,并兼容IE

原标题:计算机网络:vue拦截器实现统一token,并兼容IE

浏览次数:66 时间:2019-05-18

  项目中运用vue搭建前端页面,并经过axios请求后台api接口,完毕数据交互。若是注明口令token写在在每一遍的接口中,也是个比异常的大的体力活,而且也不灵便。这里分享应用vue自带拦截器,给每一趟请求的底部加多token,而且非常了IE玖。

品类中使用vue搭建前端页面,并经过axios请求后台api接口,实现多少交互。假如证实口令token写在在每趟的接口中,也是个十分的大的体力活,而且也不活络。这里分享应用vue自带拦截器,给每一趟请求的头顶加多token,而且异常了IE玖。

四、因为有人在切磋里问util文件,应该是想驾驭具体怎么剖断token过期的,其实在获得token时,是有重返3个token过期时间 ,你能够先将它先保存起来,然后在必要时,拿出来与本土时间相比就可以

  写在后边。因为本身的token放在了缓存中,所以在每便请求前,作者会先在前者抽取token,并证实其时效性,借使过期或不设有会先跳转到登录页,而不会走拦截器去乞请请求。具体也参照mounted()方法。

  写在前边。因为本人的token放在了缓存中,所以在每一遍请求前,笔者会先在前者抽取token,并证实其时效性,假诺过期或不设有会先跳转到登录页,而不会走拦截器去央浼请求。具体也参照mounted()方法。

计算机网络:vue拦截器实现统一token,并兼容IE9验证功能。token身份验证机制

import axios from 'axios';

// 这里的config包含每次请求的内容,在这里把token放到请求头
axios.interceptors.request.use(function (config) {  
    let token = window.localStorage.getItem("tokenid");  //从缓存中取token
    if (token) {
        config.headers.Authorization = token;    //将token放到请求头发送给服务器

        //这里主要是为了兼容IE9
        var browser = navigator.appName;
        var b_version = navigator.appVersion;
        if (browser == 'Netscape' && b_version.indexOf(';') < 0) {  //火狐

        } else {
            if (b_version.indexOf(';') < 0) {
                return config;
            }
            var version = b_version.split(";");
            var trim_Version = version[1].replace(/[ ]/g, "");

            if (browser == "Microsoft Internet Explorer" && trim_Version == "MSIE9.0") {  //IE9
                if (config.url.indexOf('?') > 0) {
                    config.url = config.url   "&token="   JSON.parse(token).value;
                }
                else {
                    config.url = config.url   "?token="   JSON.parse(token).value;
                }
            }
        }
    } else {
       localStorage.clear();  //清空缓存
       if (router.currentRoute.name && router.currentRoute.name.toLowerCase() == "login") {  
        //这里需要排除登陆(或者说是第一次请求获取token)的时候的请求验证,我这里没做处理
       //我的后台api接口,并没有对login接口做token验证,所以这里不做处理
        } else {        
        //除登陆接口外,其他需要token验证的方法,会走这里且返回null
            return null;
        }
    }
    return config;
}, function (err) {
    // return Promise.reject(err);
});


// http response 拦截器
axios.interceptors.response.use(
    response => {
        return response;  //请求成功的时候返回的data
    },
    error => {
        try {
            if (error.response) {
                switch (error.response.status) {
                    case 401://token过期,清除token并跳转到登录页面
                       localStorage.clear();
                       var baurl = window.location.href;
                    router.replace({
                                path: 'login',
                                query: { backUrl: baurl }
                            });                      
                        return;
                }
            }
            return Promise.reject(error.response.data)
        }
        catch (e) {

        }
    });

你或许感兴趣的稿子:

  • Vue 拦截器对token过期管理方法
  • Vue-resource拦截器决断token失效跳转的实例
  • Vue二.0 axios前后端登入拦截器(实例批注)
  • vue中页面跳转拦截器的达成格局
  • vue-resource 拦截器(interceptor)的施用详解
  • vue拦截器Vue.http.interceptors.push使用详解
  • vue-resource 拦截器使用详解

此间供给小心几点:

总结

在对token身份验证机制实行三遍简要介绍后,进入正文...

如上所述是笔者给大家介绍的vue拦截器达成合并token,并兼容IE九验证,希望对我们享有帮助,假使我们有任何疑问请给本身留言,小编会及时还原我们的。在此也特别感激大家对台本之家网址的支撑!

在时下公司的品种里,为了越来越好的用户体验,大家选拔手动刷新token。登入请求成功后,会回去三个token和token过期时间,在历次请求api时,前端能够先判别一下token是还是不是快要过期或已过期,要是是,则呼吁刷新token的接口,成功替换原来的token之后才得以重新发起呼吁。

import axios from 'axios';
// 这里的config包含每次请求的内容,在这里把token放到请求头
axios.interceptors.request.use(function (config) { 
  let token = window.localStorage.getItem("tokenid"); //从缓存中取token
  if (token) {
    config.headers.Authorization = token;  //将token放到请求头发送给服务器
    //这里主要是为了兼容IE9
    var browser = navigator.appName;
    var b_version = navigator.appVersion;
    if (browser == 'Netscape' && b_version.indexOf(';') < 0) { //火狐
    } else {
      if (b_version.indexOf(';') < 0) {
        return config;
      }
      var version = b_version.split(";");
      var trim_Version = version[1].replace(/[ ]/g, "");
      if (browser == "Microsoft Internet Explorer" && trim_Version == "MSIE9.0") { //IE9
        if (config.url.indexOf('?') > 0) {
          config.url = config.url   "&token="   JSON.parse(token).value;
        }
        else {
          config.url = config.url   "?token="   JSON.parse(token).value;
        }
      }
    }
  } else {
    localStorage.clear(); //清空缓存
    if (router.currentRoute.name && router.currentRoute.name.toLowerCase() == "login") { 
      //这里需要排除登陆(或者说是第一次请求获取token)的时候的请求验证,我这里没做处理
      //我的后台api接口,并没有对login接口做token验证,所以这里不做处理
    } else {      
      //除登陆接口外,其他需要token验证的方法,会走这里且返回null
      return null;
    }
  }
  return config;
}, function (err) {
  // return Promise.reject(err);
});
// http response 拦截器
axios.interceptors.response.use(
  response => {
    return response; //请求成功的时候返回的data
  },
  error => {
    try {
      if (error.response) {
        switch (error.response.status) {
          case 401://token过期,清除token并跳转到登录页面
            localStorage.clear();
            var baurl = window.location.href;
             router.replace({
                path: 'login',
                query: { backUrl: baurl }
              });           
            return;
        }
      }
      return Promise.reject(error.response.data)
    }
    catch (e) {
    }
  });

在刷新token请求的打响回调里实行下边代码,重新发起呼吁。

/*是否有请求正在刷新token*/
window.isRefreshing = false
/*被挂起的请求数组*/
let refreshSubscribers = []

/*获取刷新token请求的token*/
function getRefreshToken () {
 return JSON.parse(localStorage.auth).refresh_token
}

/*push所有请求到数组中*/
function subscribeTokenRefresh (cb) {
 refreshSubscribers.push(cb)
}

/*刷新请求(refreshSubscribers数组中的请求得到新的token之后会自执行,用新的token去请求数据)*/
function onRrefreshed (token) {
 refreshSubscribers.map(cb => cb(token))
}

/*请求拦截器*/
ajax.interceptors.request.use(
 config => {
  const authTmp = localStorage.auth
  /*判断是否已登录*/
  if (authTmp) {
   /*解析登录信息*/
   let auth = JSON.parse(authTmp)
   /*判断auth是否存在*/
   if (auth) {
    /*在请求头中添加token类型、token*/
    config.headers.Authorization = auth.token_type   ' '   auth.token
    /*判断刷新token请求的refresh_token是否过期*/
    if (util.isRefreshTokenExpired()) {
     alert('刷新token过期,请重新登录')
     /*清除本地保存的auth*/
     localStorage.removeItem('auth')
     window.location.href = '#/login'
     return
    }
    /*判断token是否将要过期*/
    if (util.isTokenExpired() && config.url.indexOf('admin/auth/current') === -1) {
     /*判断是否正在刷新*/
     if (!window.isRefreshing) {
      /*将刷新token的标志置为true*/
      window.isRefreshing = true
      /*发起刷新token的请求*/
      apiList.refreshToken({refresh_token: getRefreshToken()}).then(res => {
       /*将标志置为false*/
       window.isRefreshing = false
       /*成功刷新token*/
       config.headers.Authorization = res.data.data.token_type   ' '   res.data.data.token
       /*更新auth*/
       localStorage.setItem('auth', JSON.stringify(res.data.data))
       /*执行数组里的函数,重新发起被挂起的请求*/
       onRrefreshed(res.data.data.token)
       /*执行onRefreshed函数后清空数组中保存的请求*/
       refreshSubscribers = []
      }).catch(err => {
       alert(err.response.data.message)
       /*清除本地保存的auth*/
       // localStorage.removeItem('auth')
       window.location.href = '#/login'
      })
     }
     /*把请求(token)=>{....}都push到一个数组中*/
     let retry = new Promise((resolve, reject) => {
      /*(token) => {...}这个函数就是回调函数*/
      subscribeTokenRefresh((token) => {
       config.headers.Authorization = 'Bearer '   token
       /*将请求挂起*/
       resolve(config)
      })
     })
     return retry
    }
   }
   return config

  } else {
   /*未登录直接返回配置信息*/
   return config
  }
 },
 /*错误操作*/
 err => {
  return Promise.reject(err)
 }
)

一、当token将要过期大概已过期时,原则上,大家只须求有三个接口去接触刷新token的呼吁就能够,这里的isRefreshing 变量,就起到这么一个监察的功用,它一定于1把锁,当刷新token的操作被触发后,其余的触发操作就被排斥在外了。

本文由韦德国际1946英国发布于计算机网络,转载请注明出处:计算机网络:vue拦截器实现统一token,并兼容IE

关键词: 韦德1946

上一篇:计算机网络:中的命令链接操作符

下一篇:没有了