Login button section (countdown to disable login is written here)
v-on:keyup.13.native is the Enter key to log in, and the judgment field is written in data.
Adding two-way binding to the page will display the countdown and disable the login button.
<el-button v-show="disabled" disabled type="primary" :loading="loadingbtn" @click="submitForm('ruleForm')" v-on:keyup.13.native="submit">请{
{
timeOut}}秒后重新登录</el-button>
<el-button v-show="!disabled" type="primary" :loading="loadingbtn" @click="submitForm('ruleForm')" v-on:keyup.13.native="submit">{
{
loginbtn}}</el-button>
mounted() {
//回车键绑定事件
window.addEventListener('keydown',this.keyDown);
},
// 回车键登录
keyDown(e){
if(e.keyCode == 13){
var ruleForm = this.ruleForm
this.submitForm('ruleForm');
}
},
Development password error limit
The number of monitored user input is stored in localStroage, ( to prevent the page refresh data from being empty ).
Add a time function to enable the countdown, add the time stamp stored in the localStroage record to disable the enabled time, ( to prevent the data from being cleared when the page is refreshed ).
//此处省略判断登录失败部分
if(window.localStorage.getItem('userCode')){
// 取出输入密码错误的次数
let error_times = window.localStorage.getItem('userCode')
// 超过登录次数
if(error_times >= 3){
this.disabled = true //禁用按钮
// 获取触发时间获取超次数时间并保存
var timestamp = parseInt(new Date().getTime()/1000)
window.localStorage.setItem('timestamp',timestamp)
//页面显示倒计时59秒
this.timeOut = Math.floor((59000/1000) %60)
var auth_timetimer = setInterval(()=>{
this.timeOut--;
if(this.timeOut<=0){
this.count = 0,
this.disabled = false; //关闭禁用登录状态
window.localStorage.removeItem('userCode') //清空登录错误次数
clearInterval(auth_timetimer); //清除倒计时
}
}, 1000);
// 这里相同判断是处理userCode为undenfind的情况
}else{
this.userCode++;
window.localStorage.setItem('userCode',this.userCode) //存储密码错误次数
}
refresh page
Check whether there is too many times of password input being disabled, and obtain the time stamp after the page is refreshed ( judging whether there is an unfinished countdown to disable ).
If it is not completed, then 59 minus the subtraction number of the two time nodes = the remaining disabled time that has not been completed.
created() {
this.init() //页面初始化
},
methods: {
init(){
if(window.localStorage.getItem('userCode')){
//判断是否第一次登录
let error_times = window.localStorage.getItem('userCode')
//判断是否输入了三次错误密码
if(error_times >= 3){
this.disabled = true //禁用按钮
var nowTime = parseInt(new Date().getTime()/1000) //进入页面的时间
//判断是否存在倒计时
if(window.localStorage.getItem('timestamp')){
//输入超过3次被限制的时间
var timestamp = window.localStorage.getItem('timestamp')
if(timestamp >= 0){
//判断倒计时是否结束
//过去的时间
var ms = nowTime-timestamp
//剩余的时间
this.timeOut = 59-ms
//判断倒计时是否结束
if(59000 > this.timeOut){
var auth_timetimer = setInterval(()=>{
this.timeOut--;
if(this.timeOut<=0){
this.count = 0,
this.disabled = false;
window.localStorage.removeItem('userCode')
clearInterval(auth_timetimer);
}
}, 1000);
}
}
}else{
this.disabled = false
window.localStorage.removeItem('userCode')
}
}
}
},
}
Development ideas:
The situations to be considered are: the number of login errors obtained cannot be cleared by page refresh. Countdown cannot be cleared by page refresh. After the page is refreshed, the unfinished countdown should continue.
1. Obtain the time stamp of the refresh page
2. Determine whether there is an unfinished countdown and the wrong password has been entered several times
3. If the wrong password is entered more than 3 times, the time stamp of the third time the wrong password is entered and the time to refresh the page Stamp subtraction, if it is greater than 60, it will not be disabled, if it is less than 60, it will be disabled and the countdown of the remaining time will be enabled
. 4. Get the number of monitoring user input and store it in localStroage.
60s countdown,
6. Add two-way binding to the page to display the countdown and disable the login button.