在Angular中重置密码时如何验证参数中的令牌是否正确

Question

我正在尝试在我的应用程序中构建密码重置功能。步骤如下：

1. 输入电子邮件并点击“发送重置链接到电子邮件”
2. 在他的电子邮件中，他会收到类似以下内容的链接：'www.domainname.com/api/password-reset?token-idxxxxxxxxx'
3. 单击该链接后，他将被重定向到密码重置页面以输入他的新凭据。

我的问题是如何验证参数中的令牌是否正确。例如，如果有人复制粘贴 URL 并更改令牌有点像：www.domainname.com/api/password-reset?token-id-newyyyyyy，那么他不应该被重定向到重置页。我该如何防止这种情况。 我的假设是：当我被重定向到重置页面时，我点击了另一个 API，它将向我发送 Token 值，我会将这个令牌值与 params 令牌进行比较，如果不匹配，我将重定向到另一个页面。但我确信这不是最正确的方法。我是否必须从后端做一些事情。如果在 URL 参数中输入了错误的令牌，如何防止显示重置页面？

Answer 1

如果您使用的是www.domainname.com/api/password-reset?token-idxxxxxxxxx，那么当用户从他们的电子邮件中打开此链接时，您首先在后端调用令牌验证 API。如果令牌被验证发送成功状态，如果没有发送未经授权。根据此响应，您可以重定向用户以查看输入密码页面或显示错误。

为了帮助您更好地处理流程：

1. 用户点击此链接www.domainname.com/api/password-reset?token-idxxxxxxxxx
2. 在此组件中调用后端 api 说验证用户。
3. 根据该 api 响应，您将加载重置密码组件

服务会是这样的：

verifyUser(data): Observable < any > {
  return this.http.post(environment.serverUrl + 'verifyUser', data).pipe(
    catchError((error: HttpErrorResponse) => throwError(error))
  )
}

并订阅：

this.empService.verifyUser(data).subscribe((res) => {
      console.log("Response", res);
      if (res.message == "success") {

        this.router.navigateByUrl('/resetPassword');
        } else {
        // Some error Message
        }
      }
    },
      (err) => {
        console.log(err);
        console.log("error")
      })

Answer 2

由于您将密码重置链接发送到用户注册的电子邮件，因此您无需在重置链接中附加令牌。 也不推荐共享令牌：

1. 每个令牌都有其生命周期，在整个生命周期内它都保持有效。例如 20 分钟或 1 小时。
2. 因此，如果任何其他用户有权访问此令牌，那么他/她可以使用它来访问私有数据。

在您的情况下，您应该将用户重定向到您的常规密码重置链接 (www.domainname.com/api/password-reset)。 点击链接后，用户将被重定向到您应用的密码重置页面，这里有两种情况：

1. 如果用户已经登录到应用程序，此时您可以直接显示密码重置页面。
2. 如果用户尚未登录应用程序，在这种情况下，首先您可以重定向到登录页面，然后在使用当前密码成功登录后，您可以显示密码重置页面。

成功登录后重定向到调用链接请参考以下回答： https://stackoverflow.com/a/40021645/9444169