内部服务器错误：localStorage 未定义 - Angular 17

Question

我正在使用登录和注销应用程序的所有必要方法配置 UserStorageService，但是当我执行它时，它给了我这个错误

这是我的代码

这是存储服务

import { Injectable } from '@angular/core';

const TOKEN = 'ecom-token'
const USER = 'ecom-user'

@Injectable({
  providedIn: 'root'
})
export class UserStorageService {

  constructor() { }

  public saveToken(token: string): void{
    window.localStorage.removeItem(TOKEN);
    window.localStorage.setItem(TOKEN,token);
  }

  public saveUser(user): void{
    window.localStorage.removeItem(USER);
    window.localStorage.setItem(USER, JSON.stringify(user));
  }

  static getToken(): string{
    return localStorage.getItem(TOKEN);
  }

  static getUser(): any{
    return JSON.parse(localStorage.getItem(USER));
  }

  static getUserId(): string{
    const user = this.getUser();
    if(user == null){
      return '';
    }
    return user.userId;
  }

  static getUserRole(): string{
    const user = this.getUser();
    if(user == null){
      return '';
    }
    return user.role;
  }

  static isAdminLoggedIn(): boolean{
    if(this.getToken === null){
      return false;
    }
    const role: string = this.getUserRole();
    return role == 'ADMIN';
  }

  static isCostumerLoggedIn(): boolean{
    if(this.getToken === null){
      return false;
    }
    const role: string = this.getUserRole();
    return role == 'COSTUMER';
  }

  static signOut(): void{
    window.localStorage.removeItem(TOKEN);
    window.localStorage.removeItem(USER);
  }

}

这是应用程序组件

import { Component } from '@angular/core';
import { UserStorageService } from './services/storage/user-storage.service';
import { Router } from '@angular/router';


@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrl: './app.component.scss'
})
export class AppComponent {
  title = 'e-commerce';

  isCotumerLoggedIn : boolean = UserStorageService.isCostumerLoggedIn();
  isAdminLoggedIn : boolean = UserStorageService.isAdminLoggedIn();

  constructor(private router: Router){}

  ngOnInit(): void {
    this.router.events.subscribe(event => {
      this.isCotumerLoggedIn = UserStorageService.isCostumerLoggedIn();
      this.isAdminLoggedIn = UserStorageService.isAdminLoggedIn();
    })
  }


  logout(){
    UserStorageService.signOut();
    this.router.navigateByUrl('login')
  }



}

我尝试过验证导入等，但没有任何帮助，我重新编写了代码，以防我写错，但没有解决任何问题

Answer 1

让逻辑只发生在浏览器上，我们可以使用

isPlatformBrowser

来解决：

import { ChangeDetectionStrategy, Component, Inject } from '@angular/core';
import { NgIf } from '@angular/common';
import {ScrollingModule} from '@angular/cdk/scrolling';

@Component({
  selector: 'app-root',
  styleUrl: './app.component.scss',
  templateUrl: './app.component.html',
  changeDetection: ChangeDetectionStrategy.OnPush,
  standalone: true,
  imports: [ScrollingModule, NgIf]
})
export class AppComponent {
  items = Array.from({length: 100000}).map((_, i) => `Item #${i}`);
  isBrowser: boolean;

  constructor( @Inject(PLATFORM_ID) platformId: Object) {
      this.isBrowser = isPlatformBrowser(platformId);
  }
}

在服务器上使用localStorage是没有意义的。这是仅限浏览器的功能。