Angular 17发起HTTP请求时出现localStorage未定义错误

问题根源 #

错误localStorage is not defined是因为HTTP拦截器在非浏览器环境（如Docker构建时的Node.js上下文）中尝试访问浏览器专属的localStorage API，同时AppComponent中过早发起HTTP请求（比如构造函数阶段）会触发拦截器执行，进而暴露这个问题。

具体解决方案 #

1. 修改HTTP拦截器，添加浏览器环境判断 #

两种方式任选其一即可：

方式一：直接判断localStorage是否存在

export const authInterceptor: HttpInterceptorFn = (
  req: HttpRequest<any>,
  next: HttpHandlerFn
): Observable<HttpEvent<any>> => {
  // 先判断是否在浏览器环境中
  if (typeof localStorage !== 'undefined') {
    const token = localStorage.getItem('auth_token');
    if (token) {
      const cloned = req.clone({
        setHeaders: {
          Authorization: `Bearer ${token}`,
        },
      });
      return next(cloned);
    }
  }
  return next(req);
};

方式二：使用Angular的PLATFORM_ID注入判断（更规范）

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

export const authInterceptor: HttpInterceptorFn = (
  req: HttpRequest<any>,
  next: HttpHandlerFn
): Observable<HttpEvent<any>> => {
  const platformId = inject(PLATFORM_ID);
  let token: string | null = null;
  
  if (isPlatformBrowser(platformId)) {
    token = localStorage.getItem('auth_token');
  }

  if (token) {
    const cloned = req.clone({
      setHeaders: {
        Authorization: `Bearer ${token}`,
      },
    });
    return next(cloned);
  }
  
  return next(req);
};

2. 调整AppComponent中HTTP请求的发起时机 #

将请求从构造函数移到ngOnInit生命周期钩子，确保组件在浏览器环境初始化完成后再执行：

import { Component, OnInit } from '@angular/core';
import { AuthService } from './path/to/auth.service';

@Component({
  selector: 'app-root',
  template: `
    <mat-sidenav-container>
      <mat-sidenav #sidenav mode="side" opened>
        <!-- 侧边栏内容，根据请求结果动态渲染 -->
      </mat-sidenav>
      <mat-sidenav-content>
        <router-outlet></router-outlet>
      </mat-sidenav-content>
    </mat-sidenav-container>
  `,
  standalone: true,
  imports: [/* 必要的导入，比如MatSidenavModule等 */]
})
export class AppComponent implements OnInit {
  constructor(private _authService: AuthService) {}

  ngOnInit(): void {
    // 在这里订阅HTTP请求
    this._authService.isAdmin().subscribe({
      next: (response) => {
        // 处理响应，更新侧边栏内容
      },
      error: (err) => {
        // 处理错误
      }
    });
  }
}

3. 优化AuthGuard（可选，避免潜在环境问题） #

将类式守卫改为Angularular 17推荐的函数式守卫，并添加环境判断：

import { CanActivateFn, Router } from '@angular/router';
import { inject } from '@angular/core';
import { AuthService } from './path/to/auth.service';
import { isPlatformBrowser } from '@angular/common';
import { PLATFORM_ID } from '@angular/core';

export const authGuard: CanActivateFn = () => {
  const authService = inject(AuthService);
  const router = inject(Router);
  const platformId = inject(PLATFORM_ID);

  if (isPlatformBrowser(platformId)) {
    if (authService.isAuthenticated()) {
      return true;
    } else {
      router.navigate(['/auth']);
      return false;
    }
  }
  // 非浏览器环境默认返回false，可根据需求调整
  return false;
};

修改路由配置：

{ path: '', component: MainComponent, canActivate: [authGuard]},

额外注意事项 #

• 确保Docker构建脚本执行的是针对浏览器环境的Angular构建（即ng build），而非SSR构建，除非你已专门配置了SSR的环境兼容逻辑。
• 若使用Angular Universal（SSR），需完全避免在服务器端访问浏览器API，可将localStorage逻辑替换为Cookie或其他服务器端可访问的存储方式。

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