Angular SSR：SSR（服务器端渲染）期间出现 localStorage 未定义错误

Question

我目前正在做一个医生预约 MEAN 堆栈项目来学习 Angular。我正在使用 Angular 17 和独立组件。为了理解 Angular SSR（服务器端渲染），我将 SSR 添加到了我的项目中。但是，当我在初始页面刷新或重新加载时访问 localStorage 时，localStorage 未定义，从而导致错误。这阻止我在前端使用路由防护来处理身份验证，因为在重新加载时，如果用户已经登录，他们最初会被重定向回登录页面。

我的目标是帮助理解错误的根本原因，并指导您找到解决方案，确保仅当本地存储在客户端可用时才可以访问它。

Answer 1

LocalStorage

仅存在于浏览器上，但是如果你有SSR，那么编写的代码也会在服务器上运行，因此访问它时，它将是未定义的，我们有一个函数可以确定它是服务器还是浏览器，我们可以应对这样的场景

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

@Component({
  ...
})
export class MySpecialComponent {
  onBrowser: boolean;

  constructor( @Inject(PLATFORM_ID) platformId: Object) {
    // use this flag to prevent access to local storage 
    this.onBrowser = isPlatformBrowser(platformId);

    if(this.onBrowser) {
         localStorage.setItem('hello', 'world');
    }
  }
}