typescript 如何删除令牌在SessionStorage后离开应用程序在Angular ?

w6lpcovy  于 2023-03-19  发布在  TypeScript
关注(0)|答案(1)|浏览(102)

我想在每次离开应用程序时擦除sessionStorage。
应用程序组件:

export class AppComponent implements OnInit, OnDestroy{

  constructor(private overlayService: OverlayService, private logger: LoggerService, private userService: UserService, private oAuthStorage: OAuthStorage) {
  }
  ngOnInit() {
    window.addEventListener('beforeunload', this.handleBeforeUnload);
  }

  handleBeforeUnload = () => {
    this.oAuthStorage.removeItem("access_token")
    this.oAuthStorage.removeItem("refresh_token")
    this.oAuthStorage.removeItem("id_token")
  }

  closeOverlay() {
    this.overlayService.closeOverlayByUrl();
  }

  isLoggedIn() {
    return this.userService.isLoggedIn();
  }

  ngOnDestroy() {
    window.removeEventListener('beforeunload', this.handleBeforeUnload)
  }

我现在如何签入handleBeforeUnload,例如,我放置了另一个目标URL,该URL通过在另一个页面上导航而离开我的应用程序?

yeotifhr

yeotifhr1#

您的代码问题在于targetDomain变量是在NavigationStart事件处理程序外部访问的,这意味着当您尝试将其记录到控制台或在ngOnDestroy方法中使用它时,它可能未定义。
若要解决此问题,可以将依赖targetDomain的代码移到NavigationStart事件处理程序中,如下所示:

ngOnInit() {
  this.routerSubscription = this.router.events.subscribe(event => {
    if (event instanceof NavigationStart) {
      const url = event.url;
      const urlTree = this.router.createUrlTree([url]);
      this.targetUrl = this.router.serializeUrl(urlTree);
      try {
        const parsedUrl = new URL(this.targetUrl);
        console.log(parsedUrl);
        this.targetDomain = parsedUrl.hostname;

        // Check targetDomain here
        if (this.targetDomain !== 'ven10085local') {
          this.oAuthStorage.removeItem("access_token");
          this.oAuthStorage.removeItem("refresh_token");
          this.oAuthStorage.removeItem("id_token");
        }

      } catch (error) {
        console.error(('Error parsing URL: ' +  this.targetUrl));
      }
    }
  });

  window.onbeforeunload= () => this.ngOnDestroy();
}

ngOnDestroy() {
  this.routerSubscription.unsubscribe();
}

这样,targetDomain将被定义并可在NavigationStart事件处理程序内部使用,您应该在该事件处理程序中检查目标域并清除会话存储。

相关问题