@abacritt/angularx-social-login页面刷新后会话失效问题求助

我使用@abacritt/angularx-social-login实现了谷歌登录功能，但每次刷新页面后用户会话就会失效，需要重新登录。

我的app.module.ts代码：

@NgModule({
  declarations: [
    AppComponent,
    QueryCreateComponent,
    FillFormDetailComponent,
    SendFormDetailComponent,
    LoginComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    HttpClientModule,
    MatDialogModule,
    BrowserAnimationsModule,
    FormsModule,
    MatFormFieldModule,
    MatInputModule,
    SocialLoginModule,
  ],
  providers: [
    {
      provide: 'SocialAuthServiceConfig',
      useValue: {
        autoLogin: true,
        providers: [
          {
            id: GoogleLoginProvider.PROVIDER_ID,
            provider: new GoogleLoginProvider(
              'CLIENTID', googleLoginOptions
            )
          },
       
        ],
        onError: (err) => {
          console.error(err);
        }
      } as SocialAuthServiceConfig,
    }
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

login.component.ts代码中尝试将谷歌返回的id_token存入浏览器localStorage，但没有效果：

export class LoginComponent implements OnInit{

  public user : SocialUser | undefined;
  private loggedIn: any;
  private accessToken : any;

  constructor(private authService: SocialAuthService, 
              private router: Router, private userService: UserService) { }

 async ngOnInit() {
    this.authService.authState.subscribe(user => {
      this.user = user;
      this.loggedIn = (user != null);
      localStorage.setItem('id_token', user.idToken);

      if (this.loggedIn) {
        this.userService.setCurrentUser(user);
        console.log("User set in LoginComponent:", user);
        // Redirect to QueryCreateComponent
        this.router.navigate(['/query']);
      }

    });
  }
}

请问保持客户端用户会话在页面刷新后仍有效的常规方法是什么？

1. 完善谷歌登录提供商配置 #

首先确保googleLoginOptions包含支持静默登录的参数，让autoLogin能在刷新时自动恢复会话：

const googleLoginOptions = {
  scope: 'profile email',
  prompt: 'none' // 关键参数，允许静默登录，避免刷新时弹出登录授权框
};

这个配置会让谷歌在用户已完成过登录授权的情况下，自动返回用户信息，无需再次触发授权流程。

2. 全局监听用户状态变化 #

不要只在LoginComponent中订阅authState——刷新后如果路由直接进入其他页面，LoginComponent不会初始化，无法捕获自动登录后的用户状态。应该在AppComponent中全局订阅：

export class AppComponent implements OnInit {
  constructor(private authService: SocialAuthService, private userService: UserService) {}

  ngOnInit() {
    this.authService.authState.subscribe(user => {
      if (user) {
        this.userService.setCurrentUser(user);
        localStorage.setItem('id_token', user.idToken); // 存储token作为备用验证依据
      } else {
        // 会话失效时清空本地存储和全局用户状态
        localStorage.removeItem('id_token');
        this.userService.clearCurrentUser();
      }
    });
  }
}

3. 验证Token有效性（可选但推荐） #

页面加载时，先检查localStorage中的id_token是否过期，避免用无效Token恢复会话：

// 封装工具函数解析并验证JWT有效期
function isTokenValid(token: string): boolean {
  if (!token) return false;
  const payload = JSON.parse(atob(token.split('.')[1]));
  const expirationTime = payload.exp * 1000;
  return Date.now() < expirationTime;
}

// 在AppComponent的ngOnInit中添加
const savedToken = localStorage.getItem('id_token');
if (savedToken && isTokenValid(savedToken)) {
  // 如果Token有效，触发一次手动登录（可选，确保库的状态同步）
  this.authService.signIn(GoogleLoginProvider.PROVIDER_ID);
}

4. 路由守卫配合状态检查 #

如果应用有路由守卫，要在守卫中检查全局用户状态或本地存储的Token，而非仅依赖内存中的临时状态：

@Injectable()
export class AuthGuard implements CanActivate {
  constructor(private userService: UserService, private router: Router) {}

  canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean {
    const currentUser = this.userService.getCurrentUser();
    const savedToken = localStorage.getItem('id_token');
    
    if (currentUser || (savedToken && isTokenValid(savedToken))) {
      return true;
    }
    
    this.router.navigate(['/login']);
    return false;
  }
}

内容的提问来源于stack exchange，提问作者GrauDiamand