1. 首页
  2. 前端

vue中实现token失效后自动跳转至登录页解决方案

近期,在Vue项目中遇到这样一个需求:需要在任何一个页面任何一次http请求,增加对token过期的判断,当用户30分钟未做任何操作时,token会自动过期失效,此时当进行其他操作(如:点击网页中的按钮,链接,增删改查等任何操作)或刷新网页时,让页面自动跳转至登录页进行登录。如果要在每个页面中的http请求操作中添加一次判断,那么会是一个非常大的修改工作量。

对于这个问题,一些人都提出了自己的解决方案,如:使用Vuex进行状态托管;加一个全局的守卫;在根节点加一个导航守卫;使用sessionStorange等等,结果都被否定了,这些都根本不可取,原因是:使用守卫时,需要触发点击操作进行监听,而这里并不需要点击监听,刷新也要实现该功能;sessionStorange用于本地存储一个会话(session)中的数据,当浏览器关闭后才会消失。

经过对Vue的工作原理进行分析后,小编给出了一个完美的解决方案,这里分享给大家!

对于这个问题,vue-resource的interceptors拦截器的作用正是解决此需求的妙方。要是有人使用axios中的interceptors的话,方法都是一样。
在每次http的请求响应之后,如果设置了拦截器,会优先执行拦截器函数,获取响应体,然后才会决定是否把response返回给
then进行接收。那么我们可以在这个拦截器里边添加对响应状态码的判断,来决定是跳转到登录页面还是留在当前页面继续获取数据。

Vue.http.interceptors.push((request, next) => {
 //在请求前可以做一些预处理
 function getCookie(c_Name){
 if(document.cookie.length >0) {
  let c_start= document.cookie.indexOf(c_Name+"=");
  if(c_start!=-1){
    c_start=c_start+c_Name.length +1;
    let c_end= document.cookie.indexOf(";", c_start);
    if (c_end==-1) c_end= document.cookie.length
       return unescape(document.cookie.substring(c_start, c_end));
    }
  }
  return "";
}
let tokens=getCookie("x-token");
if (tokens) {
   request.headers.set('x-token', tokens);
}else{
   router.replace({path:"/"});
}
next((response) => {
/*在响应之后传给then之前对response进行修改和逻辑判断。
对于token时候已过期的判断,
就添加在此处,页面中任何一次http请求都会先调用此处方法*/
// response.data = '...';
  if (response.data.errorCode!==0) { //与后台约定登录失效的返回码
     return ;
  }
  return response;
  });
});

此处的getCookie函数是获取token,并对获取到的token进行处理,处理成标准格式。

接下来对获取的token进行判断,如果token未过期,即token存在,则将token添加到请求头,即代码里的request.headers.set(‘x-token’, tokens);如果token已过期,则直接跳到登录页,即代码里的router.replace({path:”/”});

以上这些是在放在请求数据前,对数据做一些预处理。

接下来,在响应之后传给then之前对response进行修改和逻辑判断。此处判断的作用是:判断用户在每次调用后台数据,请求后台接口时,都进行监听,判断errorCode,如果errorCode为0,则数据接口请求成功,会将数据返回至客户端,然后才能进行接下来的操作。否则,接口请求失败,对数据进行拦截。注:这里errorCode的返回值是后台定的。

好了,到此,这个功能就轻松的实现了!

原创文章,作者:Ferrycoln,如若转载,请注明出处:https://ms200.cn/archives/361

发表评论

电子邮件地址不会被公开。 必填项已用*标注

联系我们

在线咨询:点击这里给我发消息

邮件:499661635@qq.com.com

工作时间:周一至周五,9:30-18:30

QR code