Angular应用Local Storage读取先于设置导致角色获取为空问题求助

问题说明 #

正在开发带侧边栏的Angular应用，侧边栏需根据登录用户角色展示不同选项（如超级管理员拥有专属仪表盘）。当前遇到的问题是：用户角色在AppComponent.ts中存入Local Storage，但NavComponent的ngAfterViewInit钩子先执行，导致读取到的角色为null，进而引发报错。

代码片段 #

App.component.ts #

constructor(private auth: AuthService) {}

ngOnInit(){
  this.auth.authenticate.subscribe(res => {
    this.storageService.set('userRole', res.role)
  })
}

nav.component.ts #

ngAfterViewInit(){
  this.role = this.storageService.get('userRole')
}

storageservice.ts #

get(key: string){
  const keyVal: string | null = localStorage.getItem(key)

  if(stringValue){
    return JSON.parse(keyVal);
  }
}

错误现象 #

• storageService.get('userRole')返回null，控制台日志显示读取操作早于设置操作执行
• 触发如下报错：

main.50d4493a21037afa5155.js:1 
    
   ERROR TypeError: Cannot read properties of undefined (reading '0')
at t._next (main.50d4493a21037afa5155.js:1:2189226)
at t.__tryOrUnsub (main.50d4493a21037afa5155.js:1:544147)
at t.next (main.50d4493a21037afa5155.js:1:543316)
at t._next (main.50d4493a21037afa5155.js:1:542366)
at t.next (main.50d4493a21037afa5155.js:1:542037)
at t._next (main.50d4493a21037afa5155.js:1:551777)
at t.next (main.50d4493a21037afa5155.js:1:542037)
at t._subscribe (main.50d4493a21037afa5155.js:1:1526055)
at e._trySubscribe (main.50d4493a21037afa5155.js:1:545724)
at t._trySubscribe (main.50d4493a21037afa5155.js:1:548182)

解决方案 #

方案1：直接订阅AuthService的认证流（推荐） #

既然角色来自AuthService的异步流，NavComponent无需依赖Local Storage的读写时序，直接订阅该流即可：

修改nav.component.ts：

constructor(private auth: AuthService, private storageService: StorageService) {}

ngOnInit(){
  // 订阅认证流获取最新角色
  this.auth.authenticate.subscribe(res => {
    this.role = res.role;
    // 同步存入Local Storage，用于页面刷新后恢复状态
    this.storageService.set('userRole', res.role);
  });

  // 页面刷新时，从Local Storage读取初始角色
  const savedRole = this.storageService.get('userRole');
  if(savedRole){
    this.role = savedRole;
  }
}

方案2：给StorageService添加监听机制 #

如果必须通过Local Storage传递角色，可以给StorageService添加Subject监听键值变化：

修改storageservice.ts：

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

@Injectable({ providedIn: 'root' })
export class StorageService {
  private storageSubject = new Subject<{key: string, value: any}>();

  // 暴露监听流
  get storageChanges() {
    return this.storageSubject.asObservable();
  }

  set(key: string, value: any){
    localStorage.setItem(key, JSON.stringify(value));
    this.storageSubject.next({key, value});
  }

  get(key: string){
    const keyVal = localStorage.getItem(key);
    if(keyVal){
      return JSON.parse(keyVal);
    }
    return null;
  }
}

修改nav.component.ts：

ngOnInit(){
  // 初始读取一次角色
  this.role = this.storageService.get('userRole');
  // 监听Local Storage中userRole的变化
  this.storageService.storageChanges.subscribe(change => {
    if(change.key === 'userRole'){
      this.role = change.value;
    }
  });
}

方案3：修复StorageService的语法错误 #

你的StorageService.get方法存在未定义变量stringValue的问题，先修复这个漏洞：

get(key: string){
  const keyVal: string | null = localStorage.getItem(key);
  // 替换未定义的stringValue为keyVal
  if(keyVal){
    return JSON.parse(keyVal);
  }
  // 明确返回null，避免返回undefined
  return null;
}

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