vue项目 实现6个小时之内免登录
2019-10-31 本文已影响0人
轩轩小王子
第一步:需要在登录成功之后设置6个小时的过期时间
//登录
login(){
if(this.phoneNum == "" ||!isvalidPhone(this.phoneNum)){
return Toast('请填写正确的手机号'); //Toast 引入了mint-ui
}
if(this.vCode == ""){
return Toast('请填写验证码');
}
let reqParams = {xxx}
this.btnIsDisabled = true; //按钮防止重复点击
this.$post('xxxx',reqParams).then(res=>{
setExpire('userId',res.userId,6*60*60*1000);
setExpire('userToken',res.userToken,6*60*60*1000);
this.$router.push({
path: '/home'
}
this.btnIsDisabled = false;
}).catch(err=>{
this.btnIsDisabled = false;
})
}
//免登录
freeLogin(){
let userId = getExpire('userId');
//在有效时间内
if(userId){
this.$router.push({
path: '/home'
})
}
}
beforeRouteEnter(to,from,next){
next(vm=>{
if(!from.name){ //直接通过链接进来的,避免 正常通过登录页跳转到第二个页面 点击返回又会再跳到第二个页面的情况
vm.freeLogin();
}
});
}
附:utils.js中 setExpire、getExpire
export function setExpire(key,value, expire){
let obj = {
data: value,
time: Date.now(),
expire: expire
};
localStorage.setItem(key, JSON.stringify(obj));
}
export function getExpire(key){
let val = localStorage.getItem(key);
if (!val) {
return val;
}
val = JSON.parse(val);
if (Date.now() - val.time > val.expire) {
localStorage.removeItem(key);
return null;
}
return val.data;
}