Angular中app.component.html读取sessionStorage的token为null问题求助

问题根因 #

你在ngOnInit方法中使用let声明的token是局部变量，仅在ngOnInit的函数作用域内可访问。Angular模板只能读取组件类的实例属性，你没有在类中声明token实例属性，模板读取的token默认值为undefined，所以始终判定为null。

修复方案 #

修改app.component.ts代码，将token声明为组件实例属性：

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  title = 'star-admin-angular';
  // 声明组件实例属性，模板可访问
  token: string | null = null;

  ngOnInit() {
    // 给实例属性赋值，不要用let声明局部变量
    this.token = sessionStorage.getItem('token');
  }
}

优化建议 #

• 模板中的判断逻辑可以简化，*ngIf="token==null"可以直接替换为*ngIf="!token"，空字符串、undefined、null都会被判定为假值，逻辑等效且更简洁。
• 如果登录成功后跳转到首页无需刷新即可识别token，建议额外使用路由守卫做权限校验，或者用RxJS Subject订阅token的变化状态，避免AppComponentngOnInit仅执行一次导致的状态更新不及时问题。

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