Angular多用户登录后Cookie获取用户信息异常问题排查

这和缓存没关系，核心是Angular服务的单例特性导致的：

• Angular默认情况下，服务是全局单例，应用启动时只会实例化一次。
• 你把userId定义成类属性，它只会在服务第一次实例化的时候，从Cookie读取一次值并赋值。之后哪怕Cookie更新了，这个属性的值也不会自动刷新。
• 切换用户后，服务还是原来的实例，userId还是第一次登录时的旧值，所以请求会带旧ID；而在方法里获取的话，每次调用getImage都会重新从Cookie拿最新值，所以没问题。

方案1：保持在方法内获取（最简单直接） #

就是你已经用的写法，每次调用接口时实时读取Cookie，确保拿到最新的用户ID：

export class ImageService {
  constructor(private http: HttpClient, private cookieService: CookieService) {}
  
  getImage(): Observable<Image> {
    const userId: number = +this.cookieService.get('user_id');
    return this.http.get<Image>(`${imageUrlExample}${userId}`);
  }
}

方案2：用getter属性动态获取 #

把userId改成getter，这样每次访问这个属性时都会重新读取Cookie：

export class ImageService {
  constructor(private http: HttpClient, private cookieService: CookieService) {}
  
  get userId(): number {
    return +this.cookieService.get('user_id');
  }

  getImage(): Observable<Image> {
    return this.http.get<Image>(`${imageUrlExample}${this.userId}`);
  }
}

方案3：用状态管理统一维护用户信息（适合复杂场景） #

如果你的应用有多处用到用户信息，建议创建一个专门的UserService，用BehaviorSubject管理用户状态：

@Injectable({ providedIn: 'root' })
export class UserService {
  private userSubject = new BehaviorSubject<{ userId: number; username: string } | null>(null);
  user$ = this.userSubject.asObservable();

  constructor(private cookieService: CookieService) {
    // 初始化时从Cookie加载用户信息
    this.loadUserFromCookie();
  }

  // 登录/切换用户时调用，更新Cookie和状态
  updateUser(userInfo: { userId: number; username: string }) {
    this.cookieService.set('user_id', userInfo.userId.toString());
    this.cookieService.set('username', userInfo.username);
    this.userSubject.next(userInfo);
  }

  private loadUserFromCookie() {
    const userId = this.cookieService.get('user_id');
    const username = this.cookieService.get('username');
    if (userId && username) {
      this.userSubject.next({ userId: +userId, username });
    }
  }
}

然后在ImageService中订阅用户状态：

export class ImageService {
  constructor(private http: HttpClient, private userService: UserService) {}

  getImage(): Observable<Image> {
    return this.userService.user$.pipe(
      filter(user => !!user), // 确保有用户信息
      switchMap(user => this.http.get<Image>(`${imageUrlExample}${user.userId}`))
    );
  }
}

这种方式能保证所有依赖用户信息的地方都能实时拿到最新值，适合用户频繁切换或多组件共享用户数据的场景。

虽然这次问题和缓存无关，但可以配置NGINX禁止缓存index.html，避免其他可能的缓存问题：
在NGINX的server配置块中添加：

location = /index.html {
    expires -1;
    add_header Cache-Control "no-store, no-cache, must-revalidate, proxy-revalidate, max-age=0";
    add_header Pragma "no-cache";
}

这样浏览器每次都会请求最新的index.html，不会缓存它。

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