使用 angularx-social-login 进行 Angular google 自动登录

Question

我正在使用谷歌登录在 angularx-social-login 的帮助下验证我的用户，登录和注销正在工作，但我希望用户在不注销的情况下保持登录状态，这意味着，如果我关闭一个选项卡或浏览器，下次不用再登录。我使用守卫来保护延迟加载的路线。

问题是

autologin: true

不起作用，每当我重新加载页面或打开新选项卡时，守卫就会将我踢到登录页面

认证服务

  userState() {
    this.socialAuthService.authState.subscribe((user) => {
      this.user = user;
      this.loggedIn = (user != null);
    });
  }

authGuard

    if (!this.authService.loggedIn) {
      this.router.navigate([localUrls.login])
    }
    return true

编辑： 我进行了一些调试，发现行为如下：

1-打开新标签页

2-守卫检查loggedIn变量，其为假

3-守卫重定向到登录页面

4- authService 接收登录用户，loggedIn 设置为 true

5-用户实际登录时卡在登录页面

有人有解决这个问题的提示吗？

Answer 1

您可以通过在服务中存储身份验证令牌来改善这种情况。

用户登录时保存身份验证令牌。 创建一个函数来注销用户，处理社交身份验证和应用程序注销。 设置一个守卫，在访问某些路由之前检查用户是否登录。 根据令牌的存在进行简单检查以查看用户是否已登录。 确保社交身份验证和您的应用程序的注销过程顺利进行。 使用身份验证防护来防止未经授权访问某些路由。

login(user: SocialUser) {
  localStorage.setItem(this.tokenKey, user.authToken);
  this.router.navigate(['/dashboard']);
}

logout(): void {
  this.socialAuthService.signOut().then(() => this.accountService.logout());
}

canActivate(): boolean {
  if (!this.authService.isLoggedIn()) {
    this.router.navigate(['/login']);
    return false; // Ensure that navigation stops when not logged in
  }
  return true;
}

public isLoggedIn(): boolean {
  const token = localStorage.getItem(this.tokenKey);
  return token !== null && token.length > 0;
}