Angular登录时调用reload报reading 'include'未定义错误如何解决

问题原因 #

你遇到的Cannot read properties of undefined (reading 'include')错误，本质是代码中某一处对undefined值调用了includes()方法，结合你是在window.location.reload()触发后才报错，说明错误出在页面刷新后的应用初始化逻辑中。

排查与解决步骤 #

1. 优先修复角色读取的空值问题
   你目前的代码里直接读取this.tokenStorage.getUser().roles，没有做任何空值保护：
   如果TokenStorageService的getUser()方法在localStorage没有匹配数据时返回undefined，或者后端登录接口返回的用户数据中没有roles字段，那么roles变量就会是undefined，后续任何对roles.includes(xxx)的调用都会触发这个错误。
   修复方法：给所有读取用户、角色的逻辑加空值保护，修改login.component.ts的ngOnInit代码：

ngOnInit(): void {
  const token = this.tokenStorage.getToken();
  const user = this.tokenStorage.getUser();
  if (token && user) {
    this.isLoggedIn = true;
    this.roles = user.roles || []; // 角色不存在时默认赋值为空数组
  }
}

同时全局排查所有用到includes()的代码，统一加可选链保护，比如把xxx.includes(yyy)改成xxx?.includes(yyy)，如果是角色判断可以写成(roles || []).includes('目标角色')。

2. 检查HTTP拦截器/路由守卫逻辑
   绝大多数Angular JWT项目会配置全局HTTP拦截器、路由守卫，这两类逻辑是刷新后最早执行的：

• 确认拦截器中有没有对请求url做url.includes()判断的逻辑，有没有可能url为undefined
• 确认路由守卫中有没有判断用户角色的逻辑，有没有直接读取roles.includes()没有做空值保护的情况

3. 可选优化：移除强制刷新逻辑
   Angular是单页应用，登录成功后不需要调用window.location.reload()刷新页面，直接用Router跳转到对应业务页即可，既优化体验也能避免刷新触发的初始化报错：

// 先导入Router
import { Router } from '@angular/router';
// 构造函数注入
constructor(private authService: AuthService, private tokenStorage: TokenStorageService, private router: Router) { }
// 登录成功后替换reload为跳转
// this.reloadPage();
this.router.navigate(['/home']); // 改成你的业务路由地址

4. 确认后端返回结构
   在登录请求的subscribe回调中打印返回的data，确认后端返回的结构包含你用到的accessToken、roles字段，如果字段名不匹配，调整存取逻辑即可。

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