如何在angularJS控制器中跟踪当前用户？

工厂/服务：

  angular.module('phoenix-template')
  .factory('User', ['$http', function($http){

      function current(){
        $http.get('http://localhost:4000/api/current_user').then(function(res){
          return res.data;
        })
    }

    this.currentUser = current();

  }]);
})();

控制器：

 (function(){
  'use strict';

  angular.module('phoenix-template')
  .controller('NavCtrl', ['$scope','User', function($scope, User){

    $scope.currentUser = User.currentUser;

    $scope.$watch( 'currentUser', function () {
          User.currentUser = $scope.currentUser;
      });

  }]);
})();

我在后端跟踪当前用户，但我希望在控制器中跟踪当前用户，以便显示等

但是，我显然做错了

---

提示、帮助，非常感谢。

您可以使用$cookies存储用户名、令牌等用户数据。您可以在此处阅读文档$cookies

从后端服务获取用户对象后，使用$cookies存储它，然后在需要的地方获取该值

例如，您重新加载页面，然后在

app.run

阶段，从$cookie获取该用户对象并存储在某个服务或$rootScope中

我在一个示例应用程序中做了一些事情，我不记得它是否100%正常，但它会有所帮助

(function () {
'use strict';

var app = angular.module('app');
app.run(runFunction);

runFunction.$inject = ['$rootScope', '$state', '$cookies', '$window'];

/* @ngInject */
function runFunction($rootScope, $state, $cookies, $window) {
    //// Set User
    var user = $cookie.get('user')
    /* 
     Or you can do something
     if ($window.sessionStorage["user"]) {
        $rootScope.user = JSON.parse($window.sessionStorage["user"]);
     }
    */
    if (user) {
        $rootScope.user = JSON.parse(user);
    } else {
        $rootScope.user = {
            id: 0,
            username: 'Anonymous'
        };
    }

    $rootScope.$on('$stateChangeStart', function (event, toState, toParams) {
        var isAuthenticate = toState.authenticate;
        if (isAuthenticate && !$rootScope.user.token) {
            event.preventDefault();
    alert('Please login first');
            $state.go('login');
    });
}
})();

---

您可以使用$cookies存储用户名、令牌等用户数据。您可以在此处读取文档$cookies

从后端服务获取用户对象后，使用$cookies存储它，然后在需要的地方获取该值

例如，您重新加载页面，然后在

app.run

阶段，从$cookie获取该用户对象并存储在某个服务或$rootScope中

我在一个示例应用程序中做了一些事情，我不记得它是否100%正常，但它会有所帮助

(function () {
'use strict';

var app = angular.module('app');
app.run(runFunction);

runFunction.$inject = ['$rootScope', '$state', '$cookies', '$window'];

/* @ngInject */
function runFunction($rootScope, $state, $cookies, $window) {
    //// Set User
    var user = $cookie.get('user')
    /* 
     Or you can do something
     if ($window.sessionStorage["user"]) {
        $rootScope.user = JSON.parse($window.sessionStorage["user"]);
     }
    */
    if (user) {
        $rootScope.user = JSON.parse(user);
    } else {
        $rootScope.user = {
            id: 0,
            username: 'Anonymous'
        };
    }

    $rootScope.$on('$stateChangeStart', function (event, toState, toParams) {
        var isAuthenticate = toState.authenticate;
        if (isAuthenticate && !$rootScope.user.token) {
            event.preventDefault();
    alert('Please login first');
            $state.go('login');
    });
}
})();

---

我相信你会感到困惑的是，

工厂

和

服务

在角度上是不一样的

• 每次注射都会创建一个工厂
• 服务是单例的，在angular应用程序的生命周期中只创建一次

在本例中，该服务是注入控制器的最佳选择。第一个访问该服务的控制器将具体化来自服务器的用户数据。然后，使用该服务的其余控制器将使用相同的服务实例，因此每个控制器都不会有到服务器的开销

代码如下。该服务使用函数检索用户，但将结果持久化到本地字段，这样它只会被调用一次。然后，控制器可以调用该函数来检索它（或者如果添加一些检查逻辑，甚至可以直接访问该字段）

控制器代码

    (function(){
      'use strict';

      angular.module('phoenix-template')
      .controller('NavCtrl', ['$scope','ngUserService', function($scope, ngUserService){
        // call to get the user and set it to your scope variable
        ngUserService.getUser(function(user){$scope.currentUser = user;});

  }]);
})();

---

我相信你会感到困惑的是，

工厂

和

服务

在角度上是不一样的

• 每次注射都会创建一个工厂
• 服务是单例的，在angular应用程序的生命周期中只创建一次

在本例中，该服务是注入控制器的最佳选择。第一个访问该服务的控制器将具体化来自服务器的用户数据。然后，使用该服务的其余控制器将使用相同的服务实例，因此每个控制器都不会有到服务器的开销

代码如下。该服务使用函数检索用户，但将结果持久化到本地字段，这样它只会被调用一次。然后，控制器可以调用该函数来检索它（或者如果添加一些检查逻辑，甚至可以直接访问该字段）

控制器代码

    (function(){
      'use strict';

      angular.module('phoenix-template')
      .controller('NavCtrl', ['$scope','ngUserService', function($scope, ngUserService){
        // call to get the user and set it to your scope variable
        ngUserService.getUser(function(user){$scope.currentUser = user;});

  }]);
})();

---

我明白了，我们没有讨论将数据保存在浏览器内存中，比如本地存储和cookie。 我明白了，你想从后端看状态。 这是可能的，但为了性能，最好不要在所有摘要周期中都这样做。 我建议设置时间间隔——不要太小，以免网络过载，也不要太大，以保持对当前信息的跟踪

这是关于角度间隔问题的答案。我想这会有帮助。 此解决方案可通过以下方式实施：

.controller('NavCtrl', function($scope, User,$interval){
     $scope.loadCurrentUser = function (){
            $scope.currentUser = User.currentUser;
      };

   //Put in interval, first trigger after 10 seconds 
   $interval(function(){
      $scope.loadCurrentUser();
   }, 10000);    

   //invoke initialy
   $scope.loadCurrentUser();
  });

---

我删除了依赖项注入。我建议使用名为的自动解析依赖项注入工具。

我知道我们没有讨论将数据保存在浏览器内存中，如localStorage和Cookie。 我明白了，你想从后端看状态。 这是可能的，但为了性能，最好不要在所有摘要周期中都这样做。 我建议设置时间间隔——不要太小，以免网络过载，也不要太大，以保持对当前信息的跟踪

这是关于角度间隔问题的答案。我想这会有帮助。 此解决方案可通过以下方式实施：

.controller('NavCtrl', function($scope, User,$interval){
     $scope.loadCurrentUser = function (){
            $scope.currentUser = User.currentUser;
      };

   //Put in interval, first trigger after 10 seconds 
   $interval(function(){
      $scope.loadCurrentUser();
   }, 10000);    

   //invoke initialy
   $scope.loadCurrentUser();
  });

---

我删除了依赖项注入。我建议使用自动解析依赖项注入的工具调用。

是的。我正在做类似于localStorage的事情，存储jwt。不过，非常感谢这个建议。不过，我主要是想理解从工厂到控制器的持久化数据。是的。我正在做一些工作类似于localStorage，存储jwt。不过，非常感谢您的建议。不过，我主要是想了解从工厂到控制器的持久化数据。您不会将任何内容返回到工厂中当前的

函数。此外，您也不会将任何内容返回到工厂构造函数。您不会将任何内容返回到工厂中的
current
函数。此外，您也不会将任何内容返回到工厂构造函数。谢谢。我确实对服务/工厂有误解。如果我想清除当前用户，我假设在注销后再次调用ngUserService.getUser（），并将其设置为$watch（）在我的navCtrl？@someoneHere-有不止一种方法可以剥猫皮，但这里有一种方法。如果navCtrl存在很长时间，您可以允许您的服务进行回调（如果您愿意，也可以使用它们的数组）这将通知感兴趣的订阅者用户已更改。向名为logOut的服务添加另一个方法，该方法将删除用户变量。让logOut和getUser方法检查是否存在已注册的回调并执行回调。基本上是一个事件系统。其他控件在运行时将始终获取最新的用户nstatiated，因此它实际上仅适用于长寿命对象。@此处有人-另请注意。如果可以多次创建/销毁navCtrl，则必须注销事件回调