vue项目 实现24个小时之内免登录

  • 内容
  • 相关

第一步:需要在登录成功之后设置24个小时的过期时间

//登录
        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,24*60*60*1000);
                setExpire('userToken',res.userToken,24*60*60*1000);
                this.$router.push({
                            path: '/'
                 }
                 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;
}
您阅读这篇文章共花了:  

本文标签:

版权声明:转载请带上版权原创为《星城

解压密码:若设有密码均为:www.xcooo.cn

收录状态:百度已收录点击查看详情

vue项目 实现24个小时之内免登录

发表评论

您可以选择匿名评论,保护个人隐私 !