Angular中JwtModule配置报错：localStorage is not defined

你在app.module.ts中配置JwtModule.forRoot时直接使用localStorage.getItem，导致初始化阶段抛出localStorage is not defined错误，这是因为代码可能在非浏览器环境（比如Angular SSR的服务端）执行，此时浏览器的localStorage对象不存在。

以下是两种可行的解决方法：

方法一：直接判断浏览器环境 #

修改tokenGetter函数，先检查当前是否处于浏览器环境，再访问localStorage：

JwtModule.forRoot({
  config:{
    tokenGetter : () => {
      // 仅在浏览器环境下读取localStorage
      if (typeof window !== 'undefined') {
        return localStorage.getItem('accessToken');
      }
      return null;
    },
    allowedDomains : ["localhost:44382"]
  }
}),

方法二：使用Angular的PLATFORM_ID依赖注入（推荐） #

这种方式更符合Angular的最佳实践，尤其适用于服务端渲染场景：

1. 先导入必要的依赖：

import { PLATFORM_ID, Inject } from '@angular/core';
import { isPlatformBrowser } from '@angular/common';

2. 创建工厂函数，通过注入的PLATFORM_ID判断环境：

export function tokenGetterFactory(@Inject(PLATFORM_ID) platformId: Object) {
  return () => {
    if (isPlatformBrowser(platformId)) {
      return localStorage.getItem('accessToken');
    }
    return null;
  };
}

3. 在JwtModule配置中使用该工厂函数：

JwtModule.forRoot({
  config:{
    tokenGetter : tokenGetterFactory,
    allowedDomains : ["localhost:44382"]
  }
}),

核心原因 #

Angular应用初始化过程中，若启用了服务端渲染（SSR），部分代码会在服务器端执行，而服务器端没有浏览器的window对象和localStorage；即使未启用SSR，应用启动的早期阶段也可能还未挂载到浏览器环境，直接访问localStorage会触发未定义错误。通过环境判断确保仅在浏览器环境下访问localStorage，即可解决该问题。

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