AngularJS中已登录用户详情无法在首页显示的问题排查

核心问题分析 #

1. 控制器作用域隔离：每个ng-controller指令会创建独立的控制器实例，登录页的LoginpageCtrl和首页的LoginpageCtrl属于不同作用域，登录时设置的$scope.name无法跨实例共享。
2. 登录验证逻辑漏洞：原代码中some方法的条件x.uname === $scope.uname && x.password === $scope.password ||x.age存在逻辑错误——只要用户有age字段（所有测试用户都满足），验证就会通过，等于跳过了密码校验。
3. 用户信息存储不完整：仅保存用户名，无法获取年龄、部门等完整信息用于首页展示。

分步解决方案 #

1. 创建单例服务共享用户数据 #

AngularJS的服务是单例模式，适合跨控制器共享状态。创建UserService存储当前登录用户：

angular.module('你的应用模块名').service('UserService', function() {
  let currentUser = null;

  // 存储当前登录用户
  this.setCurrentUser = function(user) {
    currentUser = user;
  };

  // 获取当前登录用户
  this.getCurrentUser = function() {
    return currentUser;
  };
});

2. 修复登录验证逻辑并存储完整用户信息 #

修改登录控制器的submit方法，精准匹配用户并将完整信息存入服务：

angular.module('你的应用模块名').controller('LoginpageCtrl', function($scope, $location, UserService) {
  $scope.users = [
    {uname: 'fida', password: 'fida', age:26, department:"science"},
    {uname: 'anu', password: 'anu', age:23,department:"maths"},
    {uname: 'nida', password: 'nida', age:20,department:"english"}
  ];

  $scope.submit = function(){
    // 精准匹配用户名和密码的用户
    const matchedUser = $scope.users.find(x => x.uname === $scope.uname && x.password === $scope.password);
    
    if(matchedUser){
      // 存入完整用户对象到服务
      UserService.setCurrentUser(matchedUser);
      console.log("登录成功");
      $location.path('/homePage');
    } else {
      console.log("用户名或密码错误");
      alert("wrong username and password");
    }
  };
});

3. 首页控制器获取用户信息并展示 #

为首页创建独立控制器（或复用LoginpageCtrl），从服务中获取用户数据：

angular.module('你的应用模块名').controller('HomePageCtrl', function($scope, UserService) {
  // 获取当前登录用户
  $scope.currentUser = UserService.getCurrentUser();
});

修改首页HTML，绑定完整用户信息：

<div ng-controller="HomePageCtrl">
<table class="table table-striped" >
    <tr>
        <th>Name</th>
        <th>Age</th>
        <th>Department</th>
    </tr>
    <!-- 仅当用户存在时渲染行 -->
    <tr ng-if="currentUser">
        <td>{{currentUser.uname}}</td>
        <td>{{currentUser.age}}</td>
        <td>{{currentUser.department}}</td>
    </tr>
</table>
</div>

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