Angular中保存Token到localStorage返回Undefined问题求助

问题描述 #

尝试将接口返回的Token保存到localStorage，但res.token始终返回Undefined，相关代码如下：

登录函数 #

login() {
  this.errorMsg = [];
  this.authService
    .authenticate({
      body: this.authRequest,
    })
    .subscribe({
      next: (res) => {
        this.tokenService.token = res.token as string;
        console.log(res.token);
        // this.router.navigate(['books']);
      },
      error: (err) => {
        console.log(err);
        if (err.error.validationErrors) {
          this.errorMsg = err.error.validationErrors;
        } else {
          this.errorMsg.push(err.error.error);
        }
      },
    });
}

TokenService类 #

export class TokenService {
  
  set token(token: string) {
      localStorage.setItem('token', token);
  }

  get token() {
    return localStorage.getItem('token') as string;
  }
}

排查与解决步骤 #

• 核对接口返回的实际结构
  打开浏览器开发者工具的Network标签，找到登录接口的请求，查看Response的真实结构。很多时候接口返回的Token字段并非token，可能是access_token、data.token这类嵌套或命名不同的字段，需要根据实际返回调整取值路径。

• 检查authService的处理逻辑
  查看authService.authenticate内部是否对接口返回值做了映射、过滤等处理，比如是否用map操作转换了返回数据，导致原始的Token字段被遗漏或重命名。

• 打印完整响应对象确认字段
  在next回调中先打印整个res对象：console.log(res)，直接查看响应的所有属性，确认Token是否存在以及正确的字段名称，避免依赖直觉判断字段名。

• 移除不安全的强制类型断言
  代码中res.token as string的强制断言会掩盖res.token为undefined的真实问题，建议先做存在性判断再赋值：

  next: (res) => {
    if (res.token) {
      this.tokenService.token = res.token;
    } else {
      console.error('接口未返回有效Token');
    }
  }
  

• 验证TokenService的注入正确性
  确保TokenService在对应模块的providers数组中声明，并且组件通过构造函数正确注入：

  constructor(private tokenService: TokenService) {}
  

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