Angular登录后未获取到用户名如何实现自动登出并清空本地存储

现存问题 #

• 语法错误：CheckLogin方法的if判断中使用了单等号=，属于赋值操作而非相等判断，该表达式返回值为undefined，布尔值为假，因此alert逻辑永远不会触发
• 逻辑错误：localStorage.getItem未匹配到key时返回值为null而非undefined，原判断条件无法命中未登录场景
• 触发时机错误：仅在提交按钮点击时触发检测，无法满足进入首页自动校验的需求

修复代码 #

main.ts #

import { Router } from '@angular/router';
    
export class MainComponent implements OnInit {
  username: string | null = null;
  userId: string | null = null; // 补充缺失的userId类型声明
    
  constructor(private router: Router) {}
  
  ngOnInit(): void {
    this.userId = localStorage.getItem('userid')
    this.username = localStorage.getItem('username')
    // 进入页面立即触发登录校验
    this.CheckLogin()
  }

  CheckLogin() {
    // 同时判断null和undefined，使用三等号做相等判断
    if(this.username === null || this.username === undefined){
      alert('please login again');
      // 补充登出逻辑：清空本地存储+跳转到登录页
      localStorage.clear()
      this.router.navigate(['/login']) // 替换为你的实际登录路由
    }
  }

  onSubmit() {
    // 提交前先校验登录状态，不需要单独绑定两个click事件
    this.CheckLogin()
    // 原有提交逻辑写在下方
  }
}

main.html #

<!-- 合并click事件，只保留一个即可 -->
<input class="submit-btn" type="button" (click)="onSubmit()" value="Submit">

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