在密码重置路由上实施 Angular 守卫

Question

我在尝试弄清楚当用户尝试在 URL 中手动输入时如何验证 password-reset 路由时遇到问题。正确的功能是用户将进入 forgot-password 路线，然后从那里向他们发送一封电子邮件；该电子邮件将包含指向 password-reset 路由的 URL 并且它将包含令牌。我的低效解决方法是创建一个特定于 password-reset 路由的守卫，我正在验证令牌是否作为查询参数在 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

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

点击忘记密码 Link后，post到服务器。
服务器生成令牌，存储它，作为Link发送（url参数）
用户点击电子邮件中的 Link。
Route Guard of password-reset 询问服务器令牌是否有效。
如果是 -> 服务器使用临时 cookie 发出响应，您将使用该临时 cookie 来验证下一个 action/actions
如果没有 Route Guard 将用户发送到应用程序中未经身份验证区域中的一般错误页面。

这样可以清楚地回答你的问题吗

在密码重置路由上实施 Angular 守卫

Implement Angular guard on password reset route

angular

angular-routing

angular-router

angular-router-guards