js—密码输入错误上限，倒计时禁止登录

登录按钮部分（禁用登录的倒计时写在这）

v-on:keyup.13.native是回车键登录，判断字段写在data中
页面添加双向绑定将倒计时显示出来，将登录按钮禁用。

	<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');
				}
			},

开发密码错误次数限制

监听用户输入的次数存入localStroage，（预防刷新页面数据被空）。
添加时间函数开启倒计时，增加时间戳存入localStroage记录禁用开启的时间，（预防页面刷新被清空数据）。

//此处省略判断登录失败部分
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) //存储密码错误次数
			}

刷新页面

查看是否存在密码输入次数过多被禁用的情况，获取刷新页面后的时间戳，（判断是否存在未完成的禁用倒计时）。
未完成则59减去两个时间节点的相减数=剩余没有走完的禁用时间。

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')
				}
			}
		}
	},
}

开发思路：

考虑到的情况有：获取登录错误次数不能被页面刷新清空。倒计时不能被页面刷新清空。页面刷新后要延续没有走完的倒计时。

1、获取刷新页面的时间戳
2、判断有没有没走完的倒计时和已经输入了几次密码错误
3、 如果输入错误超过3次则将输入错误密码第三次的时间戳和刷新页面的时间戳相减，大于60则不禁用，小于60则禁用并且开启剩余时间的倒计时
4、获取监听用户输入的次数存入localStroage
5、错误次数大于3则获取当下时间戳存入localStroage并且开启时间函数进行60s倒计时，
6、页面添加双向绑定将倒计时显示出来，将登录按钮禁用。