如何在AngularJS中存储当前用户上下文？

Question

我有一个AuthService,它登录用户,它返回一个用户json对象.我想要做的是设置该对象并在应用程序(登录/注销状态)中反映所有更改,而无需刷新页面.

我如何使用AngularJS实现这一目标？

Answer 1

完成此任务的最简单方法是使用服务.例如:

app.factory( 'AuthService', function() {
  var currentUser;

  return {
    login: function() { ... },
    logout: function() { ... },
    isLoggedIn: function() { ... },
    currentUser: function() { return currentUser; }
    ...
  };
});

然后,您可以在任何控制器中引用它.以下代码监视服务中值的更改(通过调用指定的函数),然后将更改的值同步到范围.

app.controller( 'MainCtrl', function( $scope, AuthService ) {
  $scope.$watch( AuthService.isLoggedIn, function ( isLoggedIn ) {
    $scope.isLoggedIn = isLoggedIn;
    $scope.currentUser = AuthService.currentUser();
  });
});

然后,当然,您可以使用您认为合适的信息; 例如,在指令,模板等中.您可以在菜单控制器等中重复此操作(根据您的需要进行自定义).当您更改服务状态时,它们将自动更新.

更具体的取决于您的实施.

希望这可以帮助!

Answer 2

我会修改Josh的良好反应,补充一点,因为AuthService通常是任何人都感兴趣的(比如,除了登录视图之外的任何人都应该在没有人登录的情况下消失),也许更简单的替代方案是使用$rootScope.$broadcast('loginStatusChanged', isLoggedIn);(1)通知感兴趣的各方.)(2),而感兴趣的各方(如控制人)会倾听使用$scope.$on('loginStatusChanged', function (event, isLoggedIn) { $scope.isLoggedIn = isLoggedIn; }.

(1)$rootScope被注入作为服务的参数

(2)请注意,在异步登录操作的可能情况下,您需要通过将广告包含在$rootScope.$apply()函数中来通知Angular广播将改变事物.

现在,谈到在每个/多个控制器中保留用户上下文,您可能不乐意听取每个人的登录更改,并且可能更愿意只在最顶层的登录控制器中监听,然后添加其他登录感知控制器作为子/这个嵌入式控制器.这样,子控制器将能够看到继承的父$ scope属性,例如您的用户上下文.