Angular登录后用户信息表格无法显示问题求助

1. 核心问题：getUserProfile请求未携带JWT Token #

你的UserService中getUserProfile方法注释了需要JWT头，但实际未添加携带token的请求头，导致后端可能拒绝返回用户数据，userDetails始终未赋值，表格因*ngIf="userDetails"无法渲染。

修改user.service.ts中的getUserProfile方法：

getUserProfile(){
  const headers = new HttpHeaders({
    'Authorization': `Bearer ${this.getToken()}`
  });
  return this.http.get(environment.apiBaseUrl + '/userProfile', { headers });
}

2. 确认登录时已正确存储Token #

确保登录组件调用login方法后，将后端返回的token存入localStorage，示例代码：

// 登录组件中的处理逻辑
this.userService.login(authCredentials).subscribe(
  (res) => {
    this.userService.setToken(res.token); // 必须调用此方法存储token
    this.router.navigate(['/user-profile']);
  },
  (err) => console.log(err)
);

3. 验证响应数据结构是否匹配 #

在user-profile.component.ts的ngOnInit中打印响应结果，确认后端返回的res是否包含user字段：

ngOnInit() {
this.userService.getUserProfile().subscribe(
  (res) => {
    console.log('API响应:', res); // 检查实际返回的结构
    this.userDetails = res['user']; // 如果结构不符，需调整此处取值逻辑
  },
  (err) => {
    console.log('请求错误:', err);
    // 可选：如果是401未授权，自动跳转到登录页
    if(err.status === 401) {
      this.router.navigate(['/login']);
    }
  }
 );
}

4. 处理userDetails为空的边界情况 #

如果后端返回数据为空或请求失败，可在模板中添加兜底提示：

<div *ngIf="!userDetails" class="text-center">
  加载中...或用户信息获取失败
</div>
<table *ngIf="userDetails" class="table-fill">
  <!-- 原表格内容 -->
</table>

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