瀏覽器關閉時的調用方法不刷新

Question

我正在使用 angular 創建一個項目，在我的應用程序中我想在用戶關閉瀏覽器時注銷用戶，但問題是當頁面刷新時用戶也會注銷。 我想在頁面刷新時停止它。

@HostListener('window:beforeunload', ['$event'])
  onBeforeUnload(): void {
   navigator.sendBeacon('logout');
}

我在谷歌上嘗試了很多，但沒有找到任何解決方案來實現這一目標。 如果在 angular 中不可能，請指導我如何實現這一目標。

Answer 1

我會在 localStroage 上存儲一個時間戳以保持用戶的登錄狀態（理想情況下，這可以重構到您的身份驗證服務並使用 AuthGuards。

當用戶登錄時，我們將令牌發布到存儲中。 在刷新或任何其他類型的加載之后，我們嘗試從存儲中讀取令牌。 同樣使用beforeunload ，我們在 window 關閉之前最后一次更新令牌。

打開頁面時，我們檢查存儲中是否有令牌，並檢查它是否不超過 5 秒。 如果令牌比 5 秒新用戶登錄。

這意味着刷新速度快於 5 秒，用戶仍保持登錄狀態。我們假設關閉瀏覽器需要超過 5 秒。 我們不能真正使用window:beforeunload僅僅因為像其他人指出的那樣——對於瀏覽器來說，刷新、關閉選項卡或關閉瀏覽器本身時都是一樣的。

這個簡化的例子是保持前端用戶的 session 與存儲中的令牌保持活動的常見情況，令牌以一種或另一種形式檢查 session 的有效性（在這種情況下它是基於時間的）。 盡管實際上處理令牌應該更安全，並且通常后端將使 session 本身保持活動狀態，而前端將只讀取令牌值，驗證並登錄用戶並在必要時更新令牌。

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
})
export class AppComponent implements OnInit {
  isLoggedIn = false;
  token: string;
  now = new Date();

  @HostListener('window:beforeunload', ['$event'])
  onBeforeUnload(): void {
    if (this.isLoggedIn) {
      localStorage.setItem('myToken', this.now.toISOString());
      console.log('beforeunload:', localStorage.getItem('myToken'));
    }
    navigator.sendBeacon('logout');
  }

  constructor() {}

  ngOnInit() {
    this.checkIsLoggedIn();
  }

  // user will remain logged in for 5 seconds
  checkIsLoggedIn() {
    this.token = localStorage.getItem('myToken');
    if (this.token) {
      const currentTime = this.now.getTime() - 5 * 1000;
      const previousTime = new Date(this.token).getTime();
      if (currentTime < previousTime) {
        console.log('prev: ', previousTime);
        console.log('curr: ', currentTime);
        this.isLoggedIn = true;
      }
    }
  }

  onLogin() {
    localStorage.setItem('myToken', this.now.toISOString());
    this.token = localStorage.getItem('myToken');
    if (this.token) {
      this.isLoggedIn = true;
    }
    console.log(this.token);
  }
}

工作示例： https://stackblitz.com/edit/angular-ivy-ff9jns?file=src%2Fapp%2Fapp.component.ts

Answer 2

你可以嘗試這樣的事情。

@HostListener('window:beforeunload', ['$event'])
  onBeforeUnload(): void {
   if ((window.event.clientY < 0)) {
            // your logout logic
        }     
};

Answer 3

您可以使用本地存儲來保存身份驗證令牌並在刷新瀏覽器后獲取。 或者您可以為此使用 NgRx state 管理。

Answer 4

我對 angular 沒有任何經驗，但我知道sessionStorage 。 基本上，它會在選項卡關閉后消失，但會在頁面刷新后持續存在。 這是 MDN ，它包含確切的細節。

Answer 5

只需將登錄密鑰保存在window.sessionStorage上，然后當用戶關閉頁面時，數據就會消失。 但它保持刷新