如何在Angular的GetTokenKeyGuard.ts中获取路径参数tokenKey

嘿，我懂你的问题啦！你之前用route.queryParams是找错了位置——因为tokenKey是路由路径参数（就是URL里auth/login/后面跟着的那串值），不是URL中?后缀的查询参数，所以用queryParams肯定拿不到值~

正确的获取方式 #

根据你的路由配置path: 'auth/login/:tokenKey'，你需要从ActivatedRouteSnapshot的params或者更推荐的paramMap属性中获取这个参数：

方式1：使用params（简单直接）

canActivate(route: ActivatedRouteSnapshot) {
  // 从路径参数中取出tokenKey
  const tokenKey = route.params.tokenKey;
  localStorage.setItem('token_key', tokenKey);
  return true;
}

方式2：使用paramMap（Angular官方推荐，类型更安全）

从Angular 4+开始，官方更推荐使用paramMap来获取路径参数，它提供了更严谨的类型处理，还能应对参数不存在的场景：

canActivate(route: ActivatedRouteSnapshot) {
  // 通过get方法获取参数，返回值是string | null
  const tokenKey = route.paramMap.get('tokenKey');
  
  // 可以加个判断，避免参数不存在时存入null
  if (tokenKey) {
    localStorage.setItem('token_key', tokenKey);
  }
  
  return true;
}

为什么之前的代码不生效？ #

再给你理清楚两者的区别：

• queryParams：用于获取URL中?后面的查询参数，比如localhost:4200/auth/login?tokenKey=123这种格式的参数
• params/paramMap：用于获取路由路径中定义的参数，也就是你配置里/:tokenKey这种写在路径里的变量

这样修改后，就能正确获取到路径里的tokenKey啦！

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