token过期时web前端如何⾃动刷新token
以token处理登录的web系统，⼀般会有两个token：access-token和refresh-token。
node.js中，⼀般⽤jsonwebtoken这个模块。
access-token，是⽤户输⼊登录的账号密码，后台去db验证然后颁发的，它⼀般记录在浏览器的cookie中，并在浏览器关闭时⾃动删除，页⾯访问或ajax访问会⾃动通过cookie传回到后台，后台直接内存中校验，不⽤访问db，所以效率⾼；为了在access-token泄漏后及时⽌损，⼀般access-token会设置⼀个有效期，如1-8⼩时。
access-token设置了有效期后，过期了怎么办？为了及时⽌损，有效期不能设置太长，过期是⼀定会遇到的，⽐如⼯作狂，如果有效期设置的是8⼩时，他开着浏览器⼯作12⼩时，费⼒断断续续花了1个⼩时（电话多，喝咖啡尿多）打了张订单，提交时token过期了。再⽐如某些⼤屏幕展⽰的页⾯，可能连续⼏天⼏⽉的开着。遇到过期怎么办？
1. 重定向到登录页⾯，⽤户输⼊账号密码登录后，再⾃动跳回订单页⾯，之前的资料都丢了，⽤户骂⼀句“靠”忍⽓吞声重新打。如果
每天遇到⼀次，可能还可以忍。如果有效期太短，如1⼩时，每天遇到5,6次，那⽤户可能不⼲了，这时
你可能要把未提交的订单资料暂时存到localstorage⾥⾯。
2. 弹出登录框。登录框内容和代码如何做，预先就加载了，每个页⾯都有这部分，感觉很浪费，因为⼤部分时间⽤不上，动态从后台加
载，可能不好实现。
3. 登录后把账号密码记录在浏览器中，⾃动登录。但基于安全考虑，⼀般是⽤户特别勾选“记住我”，才会加密记录账号密码到
localstorage中，⽤户下次打开浏览器时⾃动登录。如果token过期就⾃动登录，如何及时⽌损？后台修改密码或禁⽤账号，如何同步到前端的localstorage中。⼤部分app是这么⼲的。以上3种都是要再次去后台数据库验证，所以token过期时间不能太短，否则效率很差。
4. 设置refresh-token机制，颁发access-token时同时颁发⼀个refresh-token，唯⼀区别是refresh-token有效期⽐较长，⽐如1个
⽉。当access-token过期后，拿着refresh-token到后台换取新的access-token。通过在后台为refresh-token设置⿊名单来及时⽌损，所以有⿊名单的时候，可能效率也会⼀样的差。refresh-token也过期后，那就只有⽼⽼实实的让⽤户输⼊账号密码登录了，就是前⾯的1,2⽅法。因为refresh-token不常⽤，
所以最好不要放在cookie中避免每次⾃动传到后台，放在localstorage较好。
刷新access-token过程，如何让⽤户没感觉？思路是：发现access-token，⾃动⽤refresh-token去刷新，然后再⾃动跳到原来页⾯或者⾃动调⽤⼀次原来的ajax。
1. web页⾯访问时，nodejs后台中间件拦截到access-token过期，返回⼀个html，⾥⾯包含刷新token和跳转：
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src='/js/jquery-1.11.1/jquery-1.11.1.min.js'></script>
</head>
<body>
<script>
var raw_url="<%-locals.raw_url%>";
var login_url="<%-locals.login_url%>";
var refresh_Item("<%-freshToken%>");
$.ajax({
cache:false,
method:"get",
async:true,
url:'/app/account/refreshToken',
data:{
refresh_token:refresh_token
},
success:function(data, textStatus){
location.href = raw_url;
},
error:function(XMLHttpRequest, textStatus, errorThrown){
//access-token刷新失败（可能refresh-token过期或者账号密码改了），重定向到登录页⾯        location.href = login_url;
}
});
</script>
</body>
</html>
2. ajax调⽤时，封装⼀下jquery的ajax：
yjClient.ajax=function(options){
var data=options.data;
var url=options.url;
function callAjax(){
$.ajax({
cache:options.cache?options.cache:false,
hod:(pe:'get'),
async:(options.async==undefined)?true:options.async,
url:url,
data:data,
success:function(data, textStatus){
if (options.success){
options.success(data);
}
},
error:function(XMLHttpRequest, textStatus, errorThrown){
if (sponseText){
var sponseText;
var err=JSON.sponseText);
}
else{
var AjaxErrorMsg(XMLHttpRequest,textStatus,errorThrown);
var err=new Error(msg);
}
if (de=="tm.err.foil.accessTokenExpired"){
console.log('');
var refresh_Token=refresh_freshToken);
$.ajax({
cache:false,
method:"get",
async:true,
url:'/app/account/refreshToken',
data:{
refresh_token:refresh_token
},
success:function(data, textStatus){
callAjax();
},
error:function(XMLHttpRequest, textStatus, errorThrown){
//access-token刷新失败（可能refresh-token过期或者账号密码改了），重定向到登录页⾯                      directToLoginPage();
}
});
return;
}
if (de=="tm.kenNotProvided"){
return;
}
if (){
<(err);
}
else{
yjClient.showDialog(yjDD["Failed!"],msg);
}
}
});
}
callAjax();
}
>web端登录

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。