AngularJS中通过response.data获取单条数据时vm.userRole为undefined问题

• 首先恢复你注释的日志代码 console.log("login data ", response.data)，直接打印完整的响应数据结构，确认后端返回的字段是否和预期一致：是否存在userRole字段、是否字段名拼写不一致（比如后端返回role而非userRole）、是否数据外层多封装了一层结构。
• 检查authentication.userRole服务的内部实现：AngularJS 原生$http的成功回调返回的是完整响应对象，包含data/status/headers等属性。如果你在服务封装时已经提前提取了response.data返回，那么业务代码的回调中拿到的response实际就是后端返回的原始数据，不需要再加.data取值，此时response.data本身就是undefined，自然无法取到子属性。
• 确认接口业务状态：部分后端会将业务错误也返回200状态码，此时虽然进入了成功回调，但返回数据中没有userRole字段，只有错误提示信息。
• 校验入参是否正确：确认调用接口时vm.credentials.email已经完成赋值，没有传空值或非法值导致后端返回空数据。

• 若为字段名或层级不匹配：按照实际返回的结构调整取值逻辑即可，比如后端返回结构为{code:200, result: {userRole: 'admin', email: 'xxx@xx.com'}}，就修改为 vm.userRole = response.data.result.userRole。
• 若为服务层已经提前提取了数据：去掉多余的.data，直接取 vm.userRole = response.userRole。
• 增加兜底判断避免报错，兼容异常场景：

// 支持可选链的环境可以直接写
vm.userRole = response?.data?.userRole || ''
vm.email = response?.data?.email || ''

// 不支持可选链的低版本环境用分层判断
if (response && response.data) {
  vm.userRole = response.data.userRole || ''
  vm.email = response.data.email || ''
} else {
  vm.formError = '返回数据格式异常'
}

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