Angular SSR浏览器刷新时localStorage数据丢失问题求解

• 服务端运行阶段无法访问浏览器侧真实的localStorage数据：你注入的mock-browser模拟对象、node-storage-shim都是服务端内存级的空存储，刷新页面时Angular Universal会在服务端优先执行路由匹配、路由守卫鉴权流程，这时候读取存储拿不到浏览器端存的currentUser，直接判定为未登录触发拦截。
• 现有封装的LocalstorageService通过BehaviorSubject下发环境状态的逻辑存在时序差：服务端执行阶段始终处于非浏览器环境，等客户端水合（hydration）完成能读到真实localStorage时，路由守卫的鉴权逻辑早就在服务端执行完毕，必然返回失败。
• 客户端路由跳转正常是因为该场景下所有逻辑都在浏览器侧执行，不会触发服务端完整渲染流程，可直接访问原生localStorage；移除canActivate配置后刷新正常，是因为服务端不再执行鉴权拦截，等客户端水合完成自然能读取到存储数据完成渲染。

方案一（推荐，适配成本最低） #

将鉴权逻辑强制收口到浏览器侧执行，跳过服务端阶段的鉴权判断，避免服务端读不到浏览器存储导致的拦截：

1. 改造路由守卫，增加平台判断，服务端环境直接放行，仅在浏览器环境执行真实鉴权逻辑：

// auth.guard.ts
import { Inject, PLATFORM_ID } from '@angular/core';
import { isPlatformBrowser } from '@angular/common';
import { CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot, Router, UrlTree } from '@angular/router';
import { map, Observable } from 'rxjs';
import { AuthService } from './auth.service';

@Injectable({ providedIn: 'root' })
export class AuthGuard implements CanActivate {
  constructor(
    @Inject(PLATFORM_ID) private platformId: Object,
    private authService: AuthService,
    private router: Router
  ) {}

  canActivate(
    route: ActivatedRouteSnapshot,
    state: RouterStateSnapshot
  ): Observable<boolean | UrlTree> | Promise<boolean | UrlTree> | boolean | UrlTree {
    // 服务端环境直接放行，不执行存储读取、鉴权判断
    if (!isPlatformBrowser(this.platformId)) {
      return true;
    }
    // 浏览器环境执行真实鉴权
    return this.authService.isLoggedIn().pipe(
      map(isLoggedIn => {
        if (isLoggedIn) return true;
        // 自定义未登录拦截逻辑：弹提示、跳登录页等
        if (confirm('请先登录后访问该页面')) {
          return this.router.createUrlTree(['/login'], {
            queryParams: { returnUrl: state.url }
          });
        }
        return false;
      })
    );
  }
}

2. 优化LocalstorageService封装，移除AppComponent中通过BehaviorSubject同步环境状态的逻辑，直接在服务内部做平台判断选择存储实现，彻底避免时序问题：

// localstorage.service.ts
import { Inject, PLATFORM_ID } from '@angular/core';
import { isPlatformBrowser } from '@angular/common';
import StorageShim from 'node-storage-shim';

@Injectable({ providedIn: 'root' })
export class LocalstorageService {
  private readonly serverStorage = new StorageShim();

  constructor(@Inject(PLATFORM_ID) private platformId: Object) {}

  private get activeStorage(): Storage {
    return isPlatformBrowser(this.platformId) 
      ? window.localStorage 
      : this.serverStorage as unknown as Storage;
  }

  getItem(key: string): string | null {
    return this.activeStorage.getItem(key);
  }

  setItem(key: string, value: string): void {
    this.activeStorage.setItem(key, value);
  }

  removeItem(key: string): void {
    this.activeStorage.removeItem(key);
  }

  clear(): void {
    this.activeStorage.clear();
  }
}

3. 移除server.ts中注入的mock-browser全局模拟对象，这类模拟实现容易和Angular Universal内置的DOM抽象层冲突，引发水合不匹配问题，所有浏览器API调用统一通过平台判断收口即可。

方案二（适用于需要服务端感知登录态做SEO渲染的场景） #

将登录态存储从localStorage迁移到httpOnly Cookie：

• Cookie会在页面刷新发起请求时自动携带到请求头，服务端可通过Angular Universal提供的REQUEST注入令牌拿到请求对象，解析Cookie中的登录态后同步给服务端渲染上下文，实现服务端、客户端登录态一致，鉴权逻辑可在两端正常执行。
• 该方案需要后端配合支持Cookie解析、校验逻辑，安全性比localStorage存储登录态更高，可避免XSS窃取用户凭证。

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