Angular中@abacritt/angularx-social-login刷新后如何维持登录会话？

实现步骤 #

• 登录成功后持久化用户信息：在登录状态变化的订阅回调中，将SocialUser对象序列化后存入浏览器存储（LocalStorage或Cookie）。
• 服务初始化恢复状态：在AuthService构造函数中，优先从存储中读取之前保存的用户信息，恢复本地登录状态。
• 登出时清除存储数据：调用官方登出方法后，同步清除浏览器存储中的用户信息，避免残留状态。

安全性说明 #

• LocalStorage风险：LocalStorage存储的数据易受XSS攻击，恶意脚本可窃取存储的令牌冒充用户，仅适合低安全要求场景。
• Cookie的局限性（纯客户端）：Cookie若设置HttpOnly、Secure、SameSite=Strict属性能降低风险，但纯客户端JS无法设置HttpOnly，因此安全优势无法完全发挥。
• 生产环境建议：纯客户端实现仅作临时方案，生产环境需结合后端验证，由后端管理会话或令牌有效性。

修改后的完整代码 #

import { SocialAuthService, SocialUser } from '@abacritt/angularx-social-login';
import { Injectable } from '@angular/core';

@Injectable({ providedIn: 'root' })
export class AuthService {
  public user: SocialUser | null = null;
  public loggedIn = false;
  private readonly STORAGE_KEY = 'google-social-user';

  constructor(private authService: SocialAuthService) {
    // 初始化时优先从LocalStorage恢复登录状态
    this.restoreAuthState();

    // 监听登录状态变化，同步更新存储
    this.authService.authState.subscribe((user) => {
      this.user = user;
      this.loggedIn = !!user;
      
      if (user) {
        localStorage.setItem(this.STORAGE_KEY, JSON.stringify(user));
      } else {
        localStorage.removeItem(this.STORAGE_KEY);
      }
    });
  }

  // 手动触发登出，同步清除存储
  public signOut(): void {
    this.authService.signOut().then(() => {
      this.user = null;
      this.loggedIn = false;
      localStorage.removeItem(this.STORAGE_KEY);
    });
  }

  // 从LocalStorage恢复登录状态
  private restoreAuthState(): void {
    const storedUserStr = localStorage.getItem(this.STORAGE_KEY);
    if (storedUserStr) {
      try {
        this.user = JSON.parse(storedUserStr) as SocialUser;
        this.loggedIn = true;
        // 注意：此处仅恢复本地状态，令牌有效性需后端验证（纯客户端无法完全确认）
      } catch (error) {
        // 解析失败时清除无效存储数据
        localStorage.removeItem(this.STORAGE_KEY);
      }
    }
  }
}

Cookie存储替代方案（可选） #

如果想用Cookie存储，可替换LocalStorage为以下Cookie操作方法：

// 存储用户信息到Cookie（设置7天有效期，仅HTTPS下传输）
private setUserCookie(user: SocialUser): void {
  const expires = new Date();
  expires.setDate(expires.getDate() + 7);
  const userStr = JSON.stringify(user);
  document.cookie = `google-social-user=${userStr}; expires=${expires.toUTCString()}; path=/; Secure; SameSite=Strict`;
}

// 从Cookie读取用户信息
private getUserCookie(): SocialUser | null {
  const cookieArr = document.cookie.split('; ');
  const userCookie = cookieArr.find(c => c.startsWith('google-social-user='));
  if (userCookie) {
    try {
      return JSON.parse(userCookie.split('=')[1]) as SocialUser;
    } catch (error) {
      return null;
    }
  }
  return null;
}

// 清除用户Cookie
private clearUserCookie(): void {
  document.cookie = 'google-social-user=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;';
}

使用时将restoreAuthState、订阅回调及signOut中的LocalStorage操作替换为上述Cookie方法即可。

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