在密码重置路由上实现 Angular 防护

Question

我在试图弄清楚当用户尝试在 URL 中手动输入时如何验证密码重置路由时遇到了问题。 正确的功能是用户将走忘记密码的路线，然后从那里向他们发送电子邮件； 电子邮件将包含指向密码重置路由的 URL，并将包含令牌。 我低效的解决方法是为密码重置路由创建一个特定的保护，我正在验证令牌是否作为查询参数在 URL 中传递； 这是代码：

canActivate(
next: ActivatedRouteSnapshot,
state: RouterStateSnapshot): Observable<boolean | UrlTree> | Promise<boolean | UrlTree> | boolean | UrlTree {
if (Object.keys(next.queryParams).includes('token')) {
  return true;
}
this.router.navigate(['/login']);
return false;

}

如您所见，此代码有一个不便之处：如果用户在 URL 中写入令牌，它将允许他们进入路由。

有没有办法检测导航是否来自电子邮件并基于此进行验证？ 提前致谢。

Answer 1

我们过去这样做的方法之一是 -编辑我的评论

1. 单击忘记密码链接后，发布到服务器。
2. 服务器生成令牌，存储它，作为链接发送（url 参数）
3. 用户单击电子邮件中的链接。
4. 密码重置的Route Guard 会询问服务器令牌是否有效。
5. 如果是 -> 带有临时 cookie 的服务器问题响应，您将使用该 cookie 来验证下一个操作
6. 如果 No Route Guard 将用户发送到应用程序中未经身份验证区域中的通用错误页面。

这会清楚地回答你的问题吗