如何使用Angular登录用户?

时间:2014-07-19 17:56:42

标签: angularjs node.js http express passport.js

也许我错过了一些非常微不足道的事情,但我找不到答案。

我正在为客户端实现基于nodejs,express和angular的webapp。 我通过passport.js处理我的注册和会话。因此,在服务器端,我可以通过request.user访问已登录的用户。 现在,我有一个已登录的用户,该用户在其个人资料页面上显示,通过角度视图显示。

问题在于:为了向他们展示用户信息,我正在考虑向服务器发送$http请求,该请求将用户从request发送回客户端它显示。然而,这对我来说听起来很奇怪。

所以这是我的问题:有没有办法在会话thruogh angular中访问用户?如果是,那么客户端中实际存储了哪些用户信息?

提前致谢,如果这件事太过微不足道,请道歉:/

1 个答案:

答案 0 :(得分:4)

您需要在Angular中创建一个请求当前用户的服务,并存储结果,以便您可以检索它以便在控制器中使用。为此,Angular没有内置任何东西;你必须创造自己的自我。但是,它相当直接。

myapp // assume was previously defined using var myapp = angular.module('myapp', []);
   .factory('principal', ['$http', '$q', function($http, $q) {
        var _identity = undefined;

        return {
           // this function returns the current _identity if defined; otherwise, it retrieves it from the HTTP endpoint
           identity: function(setIdentity) {
              if (setIdentity) {
                 _identity = setIdentity;
                 return;
              }

              var deferred = $q.defer();

              if (angular.isDefined(_identity)) {
                 deferred.resolve(_identity);
                 return deferred.promise;
              }

              $http.get('/path/to/endpoint')
                   .success(function(result) {
                       _identity = result;
                       deferred.resolve(_identity);
                   })
                   .error(function() {
                       _identity = undefined;
                       deferred.reject();
                   });

               return deferred.promise;
           }
        };
   }]);

principal服务目前有一种方法identity()。此方法返回一个promise。如果已经检索到身份,则会立即使用该值解析。如果没有,它将尝试从HTTP端点获取它。如果HTTP调用成功,它会将结果记忆到_identity并解析承诺。如果呼叫失败,则承诺将被拒绝。 identity具有二次使用权。如果您为其提供单个参数,则会将该值设置为标识并且不返回任何内容。如果您已拥有该标识并希望立即设置它,例如在它们成功登录后,这将非常有用。

您可以像这样管理登录页面:

myapp.controller('SignInCtrl', ['$scope', 'principal', '$http', function($scope, principal, $http) {
     // these two values will be bound to textboxes in the view
     $scope.username = '';
     $scope.password = '';

     // this function will be called when the sign in form is submitted
     $scope.submit = function() {
          $http.post('/path/to/signin', {username: $scope.username, password: $scope.password })
               .success(function(identity) {
                   // assumes /path/to/signin returns a JSON representation of the signed-in user upon successful authentication
                   // presumably the endpoint also sets a cookie representing an auth token or something of that nature. the browser will store this automatically for you
                   principal.identity(identity); // set the identity immediately
                   // do whatever else on successful login, like redirect to another route
               });
     }
}]);

另外一个需要当前身份的控制器可以做这样的事情:

myapp.controller('MyCtrl', ['$scope', 'principal', function($scope, principal) {
    // retrieve the identity. when it resolves, set user on the scope
    principal.identity().then(function(identity) {
       // after this, you can use user in your view or later in your controller
       $scope.user = identity;
    });
}]);

现在,您可以在登录后立即存储身份。我确实假设你签署用户的代码设置了一个cookie来表示一个身份验证令牌或你的登录端点中的任何东西。这样做的好处是,如果用户刷新浏览器,或者cookie存储了一段时间,用户就可以访问您的应用程序,身份将自动使用该令牌cookie解析它。

This plunk是一个更精细设置的工作演示。其中一些可能不适用于您(例如,它使用ui-router而不是常规路由),但它应该是一个合理的参考点。