如何在Angular中存储当前的用户上下文?
我有一个AuthService,它logging一个用户,它返回一个用户json对象。 我想要做的就是设置该对象,并在应用程序中反映所有更改(login/注销状态),而不必刷新页面。
我将如何完成AngularJS?
最简单的方法是使用服务。 例如:
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(); }); });
然后,当然,不pipe你认为合适,你都可以使用这些信息。 例如在指令中,在模板中等。您可以在菜单控制器等中重复这个操作(根据您的需要进行定制)。当您更改服务状态时,它们将全部自动更新。
任何更具体的取决于你的实施。
希望这可以帮助!
我会修改Josh的良好回应,因为AuthService通常是任何人都感兴趣的(比如说,如果没有人login,login视图中的任何人都应该消失),也许更简单的select是使用$rootScope.$broadcast('loginStatusChanged', isLoggedIn);
(1)(2),而感兴趣的各方(例如控制器)将使用$scope.$on('loginStatusChanged', function (event, isLoggedIn) { $scope.isLoggedIn = isLoggedIn; }
来监听$scope.$on('loginStatusChanged', function (event, isLoggedIn) { $scope.isLoggedIn = isLoggedIn; }
。
(1) $rootScope
作为服务的参数被注入
(2)注意,在一个asynchronouslogin操作的情况下,你可能希望通知Angular广播会改变一些东西,把它包含在$rootScope.$apply()
函数中。
现在,在保持每个/多个控制器中的用户上下文的情况下,您可能并不乐意在每个人中都听取login更改,并且可能更愿意仅在最上面的login控制器中进行监听,然后将其他login感知的控制器添加为小孩/这个embedded式控制器。 这样,子控制器将能够看到inheritance的父$ scope属性,如您的用户上下文。