Angular 13中获取后端路径变量ID始终返回undefined问题排查

核心误区：混淆了「路由参数」和「登录用户会话信息」 #

你现在用route.params去获取用户ID，这是错误的方向——route.params仅用于提取URL路径中的动态参数（比如访问/user/123时，:id对应的123），但当前登录用户的ID属于会话认证信息，根本不在路由参数里，所以返回undefined是必然结果。

具体解决步骤 #

1. 完善认证服务，存储用户ID

你的AuthenticationService登录后只存了用户名到sessionStorage，没有保存用户ID。需要修改登录逻辑，把用户ID也存入会话：

• 首先确认后端/login接口返回的UserLoginDto是否包含用户ID（如果后端没返回，需要调整接口返回字段）
• 修改认证服务代码：

@Injectable({
  providedIn: 'root'
})
export class AuthenticationService {
  USER_NAME_SESSION = 'authenticatedUser';
  USER_ID_SESSION = 'authenticatedUserId'; // 新增ID存储键
  private url = environment.apiBaseUrl;

  constructor(private http: HttpClient, private router: Router) { }

  username: string;
  password: string;

  public login(username: string, password: string): any {
    const headers = new HttpHeaders({Authorization: 'Basic ' + btoa(username+":"+password)});
    this.http.get<UserLoginDto>(`${this.url}/login`, {headers}).subscribe(response => {
        this.registerLogin(username, password, response.id); // 传入返回的用户ID
        this.username = username;
        this.password = password;
    });
  }

  registerLogin(username, password, userId) {
    sessionStorage.setItem(this.USER_NAME_SESSION, username);
    sessionStorage.setItem(this.USER_ID_SESSION, userId.toString()); // 存储用户ID
  }

  // 新增获取用户ID的方法
  public getAuthenticatedUserId(): number | null {
    const userIdStr = sessionStorage.getItem(this.USER_ID_SESSION);
    return userIdStr ? parseInt(userIdStr) : null;
  }
}

2. 修改组件，从会话中获取用户ID

不再从路由参数拿ID，而是直接从认证服务或sessionStorage中提取：

constructor(
  private userService: UserService, 
  private authService: AuthenticationService // 注入认证服务
){}
userId;

getUser(){
  const userId = this.authService.getAuthenticatedUserId();
  if(userId){
    this.userService.findUserById(userId).subscribe(response => {
      this.userId = response.id;
      console.log(this.userId);
    });
  } else {
    console.log("用户未登录或ID未存储");
  }
}

3. 如果你确实需要从路由参数获取ID（比如访问用户详情页）

如果你的场景是用户访问/user/:id这类页面，需要排查：

• 路由配置是否正确定义了/:id参数：

const routes: Routes = [
  { path: 'user/:id', component: UserComponent }
];

• 访问的URL是否包含ID，比如http://localhost:4200/user/123
• 使用paramMap的正确写法（比params更推荐）：

this.route.paramMap.subscribe(paramMap => {
  const userIdStr = paramMap.get('id');
  if(userIdStr){
    const userId = parseInt(userIdStr);
    this.userService.findUserById(userId).subscribe(response => {
      this.userId = response.id;
      console.log(this.userId);
    });
  }
});

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