當角度4的鏈接上沒有路由時，如何處理會話超時（或過期的令牌）

Question

對於過期令牌，我有一個非常常見的情況，如下所示，Kindle會協助我處理該問題。

我的應用程序會話是30分鍾，現在讓我們說，我在一頁上的時間超過30分鍾，然后單擊任何其他頁面鏈接。 因此它將重定向到登錄頁面。 在這里，通過路由重定向，以便主動防護出現在圖片中，並檢查令牌是否已過期，然后重定向到登錄頁面。 到目前為止看起來還不錯。 它工作正常。

但是，可以說，我在僅刷新表記錄的頁面上有一個刷新鏈接（通過調用new get http請求來刷新表記錄）（而不是刷新整個頁面）。 如果我在同一頁面上的時間超過30分鍾，然后單擊“刷新”按鈕，則如何檢查令牌是否過期。 因為在此刷新方案中未使用路由，所以不會主動保護令牌是否已過期。

您能否指導我如何處理該用例。

提前致謝 ！！！

Answer 1

在您的CanActivate路由防護器內部，您可能會返回Promise<boolean>或Observable<boolean>或boolean 。

但是在同一個保護文件中，您可能還依賴於根據令牌是否到期而返回true或false的服務。 這反過來又會使您從警衛隊返回。

假設AuthService正在檢查Auth令牌是否已過期。 數據服務正在為您獲取數據。

現在，在刷新此數據之前，可以通過以下方式再次進行檢查：將AuthService作為依賴項注入到DataService中，然后檢查令牌是否已過期。

或者 ，您的API可以檢查此請求是否已通過身份驗證。 為此，它要求您隨每個請求發送一個授權標頭。 在這種情況下，您可以使用HttpInterceptor 。 該攔截器將攔截每個傳出的請求，以檢查其上是否存在Authorization標頭。 如果存在，則只有這樣才能允許請求繼續進行。 如果沒有，您可以通過將用戶導航回到登錄頁面來完成必要的工作。

Answer 2

在我們的環境中，為了提供最佳的UX，在會話到期時不會將用戶重定向到登錄頁面。

相反，整個頁面模糊不清，並且顯示了一個模態，該模態需要輸入密碼並包含如上所述的提交按鈕。

這種方法的主要優點是：

1. 避免在重定向期間丟失未保存的工作而感到沮喪。
2. 更真實的重新認證體驗。

類似於此處描述的一些答案-https: //ux.stackexchange.com/questions/7195/best-practices-for-warning-of-session-expiration

如何在Angular中實現呢？

1. 第一次成功登錄后，將會話過期的日期/時間寫到localStorage中，例如new Date() + 30 minutes.
2. 在應用程序級別注入例如authentication.service.ts ，它將在其構造函數中具有setInterval(() => checkSessionTimeout(), eg every 1 minute) 。 這種方法將確保該方法也可以在新的標簽/窗口上運行。
3. 創建一個方法checkSessionTimeout() ，該方法輸出直到會話超時還剩下多少分鍾，並將其寫入authentication.service.ts的變量中，例如sessionTimeoutIn: number;
4. 如上圖所示，創建一個包含重新認證模式的組件。 使用<app-re-authenticate-modal *ngIf="authenticationService.sessionTimeoutIn <= 0"></app-re-authenticate-modal>在應用程序級別注入此組件
5. 為了獲得模糊效果，請使用[class.blur]="authenticationService.sessionTimeoutIn <= 0"將類添加到您的主體/主體
6. 為了獲得更好的體驗，請創建一個推入主體/主體的div，然后從包含該主體/主體的頂部進入視圖，該視圖可以通過<div *ngIf="authenticationService.sessionTimeoutIn > 0 && authenticationService.sessionTimeoutIn <= 2"></div> ：

在這些之后，用戶除了重新認證之外應該不能嘗試做其他任何事情，並且您仍然可以使用AuthenticationGuards。

希望能幫助到你。