Angular V17 SSR：服务与守卫中替代afterNextRender避免存储错误（无需platformId）

在 Angular 17 的 SSR 场景下，afterNextRender 是组件专属的生命周期 API，服务或守卫中并没有直接等效的方法。不过可以通过以下几种方式避免 localStorage/sessionStorage 未定义的错误，且无需依赖旧的 platformId：

方案一：优化 Angular CDK 的 Platform 服务用法 #

你尝试的 @angular/cdk/platform 是官方推荐的跨平台检测方案，不过原代码逻辑存在问题——应该仅在浏览器环境下调用存储方法，服务端环境需跳过：

import { Platform } from '@angular/cdk/platform';
import { Injectable } from '@angular/core';
import { CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot, UrlTree } from '@angular/router';

@Injectable({
  providedIn: 'root'
})
export class AuthGuard implements CanActivate {
  constructor(private _platform: Platform) {}

  async canActivate(
    route: ActivatedRouteSnapshot,
    state: RouterStateSnapshot
  ): Promise<boolean | UrlTree> {
    if (this._platform.isBrowser) {
      // 仅浏览器环境下安全操作 localStorage/sessionStorage
      const token = localStorage.getItem('auth_token');
      // 后续业务逻辑...
    }
    // 服务端环境的处理逻辑，比如直接返回 false 或重定向
    return false;
  }
}

如果是函数式守卫，可直接注入 Platform：

import { Platform } from '@angular/cdk/platform';
import { CanActivateFn, inject } from '@angular/router';

export const authGuard: CanActivateFn = (route, state) => {
  const platform = inject(Platform);
  if (platform.isBrowser) {
    // 浏览器环境下执行存储操作
  }
  return false;
};

方案二：直接检测 window 对象存在性 #

无需引入额外依赖，通过原生 JS 判断 window 是否存在来区分环境：

async canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Promise<boolean | UrlTree> {
  if (typeof window !== 'undefined') {
    // 确认是浏览器环境，安全调用 localStorage
    const userInfo = sessionStorage.getItem('current_user');
  }
  return false;
}

若需处理 TypeScript 类型提示，可添加类型断言：

const storage = typeof window !== 'undefined' ? window.localStorage : null;
if (storage) {
  storage.setItem('user_key', 'user_value');
}

方案三：封装兼容 SSR 的通用存储服务 #

创建统一的存储服务，内部处理环境判断，后续服务/守卫直接注入使用即可：

import { Injectable } from '@angular/core';
import { Platform } from '@angular/cdk/platform';

@Injectable({ providedIn: 'root' })
export class StorageService {
  constructor(private platform: Platform) {}

  getItem(key: string): string | null {
    return this.platform.isBrowser ? localStorage.getItem(key) : null;
  }

  setItem(key: string, value: string): void {
    if (this.platform.isBrowser) {
      localStorage.setItem(key, value);
    }
  }

  // 同理封装 sessionStorage 相关方法...
}

在守卫中调用：

constructor(private storageService: StorageService) {}

async canActivate(...) {
  const token = this.storageService.getItem('auth_token');
  // 业务逻辑处理...
}

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