关于javascript:基与vue框架登陆页自动登录功能

26次阅读

共计 1412 个字符,预计需要花费 4 分钟才能阅读完成。

html

<div v-if="tab === 2">
  <el-input prefix-icon="el-icon-user" v-model="form.userName" placeholder="请输出账户" @input="changeUserName"></el-input>
  <el-input prefix-icon="el-icon-lock" v-model="form.passWord" show-password placeholder="请输出明码"></el-input>
  <p class="other">
    <span><el-checkbox v-model="autoSub"> 主动登陆 </el-checkbox></span>
    <span> 遗记明码 </span>
  </p>
</div>

代码内容:

export default {
    name: 'login',
    data () {
        return {
            form: {
                userName: '', // 账号
                passWord: '' // 明码
            }
        }
    },
    mounted() {this.account(); // 获取 cookie 的办法
    },
    methods:{onSubmit() {if (this.autoSub == true) {
                  // 存入 cookie
                  this.setCookie(this.form.userName, this.form.passWord, 7); // 保留 7 天
            } else {this.clearCookie();
            }
            // 这里进行登录申请
        },
        // username 批改后重置明码和主动登录
        changeUserName(val) {
            this.form.passWord = '';
            this.autoSub = false
        },
        // cookie 中获取记住明码信息
        account() {if (this.getCookie("username")) {this.form.userName = this.getCookie("username");
                this.form.passWord = this.getCookie("password");
                this.autoSub = true
            } else {this.autoSub = false}
        },
        // 存储 cookie
        setCookie(c_name, c_pwd, exdate) {
            // 账号,明码,过期的天数
            var exdate = new Date();
            exdate.setTime(exdate.getTime() + 24 * 60 * 60 * 1000 * exdate); // 保留的天数
            document.cookie =
                "username=" + c_name + ";path=/;expires=" + exdate.toLocaleString();
            document.cookie =
                "password=" + c_pwd + ";path=/;expires=" + exdate.toLocaleString();},
        // 获取 cookie
        getCookie(name) {let arr = document.cookie.split(";");
            for (let i = 0; i < arr.length; i++) {let arr2 = arr[i].split("=");
                if (arr2[0].trim() == name) {return arr2[1];
                }
            }
        },
        // 革除 cookie
        clearCookie() {this.setCookie("","", -1); // 革除 cookie
        },
    }
}

正文完
 0