如何限制用户登录尝试Angular.js(打字稿)

时间:2018-11-05 03:22:49

标签: javascript angularjs typescript mean-stack login-control

我的代码限制了用户登录的尝试,但是刷新页面时它将重置用户数。

login() {
/* Only attempt login if user has less than 5 login attempts */
if (this.failedAttempts < 4) {


  this.auth.login(this.credentials).subscribe(() => {
    this.router.navigateByUrl('/');
    this.alert.success('Welcome! Thanks for logging in!');
  }, (err) => {
    this.failedAttempts++;
    console.error(err);
    this.alert.error('Login failed. Invalid email or password.');
  });
  /*If user reaches 5 failed attempts refresh number of failed attempts after 5 minutes and disable submit button*/
} else if (this.failedAttempts < 4) {
} else {
  /*increments number of times locked out */
  this.numLockedOut++;

  this.alert.error('Login failed. Invalid email or password. Locked out for ' + (this.numLockedOut * 300000) / 60000 + ' minutes');
  this.btnDisable = true;
  setTimeout(() => this.failedAttempts = 0, this.numLockedOut * 300000);
  setTimeout(() => this.btnDisable = false, this.numLockedOut * 300000);
}

}

如何settimeout(),而不重新启动页面刷新时钟

2 个答案:

答案 0 :(得分:1)

我建议您通过登录API(REST API)来实现。

当用户界面向API发送登录请求时,它可以跟踪失败的登录尝试次数。

// maintain login failure count against username; maybe in a database or in a Map
// loginFailureCount(username, count, expiryTime)

if (loginIsBlocked(username) {
   return login-response-with-login-blocked-message
} 

if (loginfailure) {
   incrementLoginFailureCount(username, expiryTime);
} else {
   resetLoginFailureCount(username);
}
// send the loginFailureCount(username) in the API response if login failed

现在,API支持失败计数以及锁定的消息。

// In the UI show the failure count or locked message if the login response is a failure

答案 1 :(得分:0)

几乎可以肯定,您希望在服务器上而不是在浏览器中记录失败的登录尝试。即使您可以使用此代码,对于某些人来说,在他们的浏览器中编辑Javascript并进行所需的多次登录尝试也是微不足道的。

如果您确实让服务器记录了给定用户名的尝试登录,则服务器的响应可能会告诉您登录尝试的次数已超过允许的数量,并且角度代码可以将该信息简单地转发给用户。这也可以解决您的问题,即页面访问之间的尝试次数不持久。 :)