Angular8项目用户登录后侧边栏菜单不显示，接口报400错误如何修复？

DevOps 小满

2026-9-26

修复方案

根因说明

后端返回400错误是因为请求未正确携带Authorization请求头，后端校验不通过拒绝返回菜单数据
组件内菜单数据赋值变量与模板绑定变量不一致，且初始化时拉取菜单的方法被注释，导致即便拿到数据也无法渲染到侧边栏

分步修复

1. 修复凭证读取与请求头拼接逻辑

修改getMenu方法，先对本地存储的登录凭证做判空校验，确保能正确读取到token后再拼接请求头：

public getMenu(){
  const localDetails = localStorage.getItem('details');
  // 无登录凭证时跳转登录页
  if(!localDetails) {
    console.error('登录凭证失效，请重新登录');
    this.router.navigate(['/login']);
    return;
  }
  // 注意：如果本地存储的details是包含token的用户对象，需要改为 JSON.parse(localDetails).token 取对应字段
  const token = localDetails;
  const header = new HttpHeaders().set('Authorization', `Bearer ${token}`);
  const headers = { headers: header };

  this.httpClient.get('http://localhost:85/api/menus/', headers).subscribe({
    next: (data) => {
      // 直接赋值给模板绑定的menuDataSet变量
      this.menuDataSet = data;
      console.log('菜单数据：', this.menuDataSet);
    },
    error: (err) => {
      console.error('菜单拉取失败：', err);
    }
  });
}

2. 修复初始化逻辑

打开ngOnInit中被注释的getRoles调用，确保页面初始化时主动拉取菜单：

ngOnInit() {
  this.userName = localStorage.getItem('user');
  this.roleName = localStorage.getItem('roleName');
  // 启用菜单拉取
  this.getRoles();
  
  // 如果你要使用auth服务的getMenus方法，需要把返回值赋值给menuDataSet
  // this.auth.getMenus().subscribe((res: any)=>{
  //   this.menuDataSet = res;
  // })
}