在密碼重置路由上實現 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 將用戶發送到應用程序中未經身份驗證區域中的通用錯誤頁面。

這會清楚地回答你的問題嗎