带有用于Auth /（re）路由的API的Angular + RESTful客户端通信

这在几个不同的问题和一些不同的教程中都有介绍，但是我所遇到的所有以前的资源并没有完全解决问题。

简而言之，我需要

• 通过POST从登录http://client.foo到http://api.foo/login
• 为用户提供提供logout路由的“已登录” GUI /组件状态
• 用户注销/注销时能够“更新” UI。 这是最令人沮丧的
• 保护我的路由以检查身份验证状态（他们是否需要），并将用户相应地重定向到登录页面

我的问题是

• 每次导航到另一个页面时，我都需要打电话api.foo/status确定用户是否已登录。（我正在使用Express进行路由的ATM）这会导致Angular确定类似问题ng-show="user.is_authenticated"
• 成功登录/注销后，我需要刷新页面（我不想这样做）以填充诸如之类的内容{{user.first_name}}，或者在注销的情况下清空该值。

// Sample response from `/status` if successful 

{
   customer: {...},
   is_authenticated: true,
   authentication_timeout: 1376959033,
   ...
}

我尝试过的

• http://witoldsz.github.io/angular-http-auth/ ¹
• http://www.frederiknakstad.com/authentication-in-single-page-applications-with-angular-js/ ²
• https://github.com/mgonto/restangular（对于我的一生，我不知道该如何POST处理post data和不该使用query params。文档对此没有任何帮助。

为什么我觉得自己迷失了方向

• 似乎每个教程都依赖于某些数据库（大量的Mongo，Couch，PHP + MySQL，无限广告）解决方案，并且没有一个纯粹依靠与RESTful API的通信来保持登录状态。登录后，将发送其他POST / GETwithCredentials:true，所以这不是问题
• 我找不到任何使用Angular + REST + Auth，没有后端语言的示例/教程/仓库。

我不太骄傲

诚然，我是Angular的新手，如果我以一种荒谬的方式来研究它，也不会感到惊讶。如果有人提出其他选择，我会很高兴-即使是汤到坚果。

我使用的Express主要是因为我真的很喜欢Jade和Stylus-我没有结婚Express“路由和会放弃它，如果我想要做的是唯一可能与角的路由。

在此先感谢您提供任何帮助。而且，请不要问我Google，因为我有26页紫色链接。;-)

^1个该解决方案依赖于Angular的$ httpBackend模拟，目前尚不清楚如何使其与真实服务器对话。

²这是最接近的，但是由于我已经需要使用现有的API进行身份验证，因此无法使用护照的'localStrategy'，并且编写OAUTH服务似乎是疯狂的……只有我打算使用。

这是从我的博客文章对URL路径的授权和安全因素考虑在这里，但我将简要总结要点:-)

前端Web应用程序中的安全性只是阻止Joe Public的开始措施，但是任何具有Web知识的用户都可以规避它，因此您也应该始终在服务器端拥有安全性。

角度安全性方面的主要问题是路线安全性，幸运的是，当您定义角度路线时，您要创建一个对象，该对象可以具有其他属性。我的方法的基础是在此路由对象中添加一个安全对象，该对象基本上定义了用户必须具有的角色才能访问特定路由。

 // route which requires the user to be logged in and have the 'Admin' or 'UserManager' permission
    $routeProvider.when('/admin/users', {
        controller: 'userListCtrl',
        templateUrl: 'js/modules/admin/html/users.tmpl.html',
        access: {
            requiresLogin: true,
            requiredPermissions: ['Admin', 'UserManager'],
            permissionType: 'AtLeastOne'
        });

整个方法围绕授权服务进行，该服务基本上进行检查以查看用户是否具有所需的权限。该服务将关注点从该解决方案的其他部分中抽象出来，以解决用户及其在登录期间可能已从服务器检索到的实际许可。虽然代码很冗长，但我的博客文章中已对它进行了详细说明。但是，它基本上处理许可检查和两种授权模式。第一个是用户必须至少具有定义的权限中的一个，第二个是用户必须具有所有定义的权限。

angular.module(jcs.modules.auth.name).factory(jcs.modules.auth.services.authorization, [  
'authentication',  
function (authentication) {  
 var authorize = function (loginRequired, requiredPermissions, permissionCheckType) {
    var result = jcs.modules.auth.enums.authorised.authorised,
        user = authentication.getCurrentLoginUser(),
        loweredPermissions = [],
        hasPermission = true,
        permission, i;

    permissionCheckType = permissionCheckType || jcs.modules.auth.enums.permissionCheckType.atLeastOne;
    if (loginRequired === true && user === undefined) {
        result = jcs.modules.auth.enums.authorised.loginRequired;
    } else if ((loginRequired === true && user !== undefined) &&
        (requiredPermissions === undefined || requiredPermissions.length === 0)) {
        // Login is required but no specific permissions are specified.
        result = jcs.modules.auth.enums.authorised.authorised;
    } else if (requiredPermissions) {
        loweredPermissions = [];
        angular.forEach(user.permissions, function (permission) {
            loweredPermissions.push(permission.toLowerCase());
        });

        for (i = 0; i < requiredPermissions.length; i += 1) {
            permission = requiredPermissions[i].toLowerCase();

            if (permissionCheckType === jcs.modules.auth.enums.permissionCheckType.combinationRequired) {
                hasPermission = hasPermission && loweredPermissions.indexOf(permission) > -1;
                // if all the permissions are required and hasPermission is false there is no point carrying on
                if (hasPermission === false) {
                    break;
                }
            } else if (permissionCheckType === jcs.modules.auth.enums.permissionCheckType.atLeastOne) {
                hasPermission = loweredPermissions.indexOf(permission) > -1;
                // if we only need one of the permissions and we have it there is no point carrying on
                if (hasPermission) {
                    break;
                }
            }
        }

        result = hasPermission ?
                 jcs.modules.auth.enums.authorised.authorised :
                 jcs.modules.auth.enums.authorised.notAuthorised;
    }

    return result;
};

现在，路由已具有安全性，您需要一种确定路线更改开始后用户是否可以访问该路由的方法。为此，我们拦截了路由更改请求，检查了路由对象（上面有我们的新访问对象），如果用户无法访问视图，我们将其替换为另一个视图。

angular.module(jcs.modules.auth.name).run([  
    '$rootScope',
    '$location',
    jcs.modules.auth.services.authorization,
    function ($rootScope, $location, authorization) {
        $rootScope.$on('$routeChangeStart', function (event, next) {
            var authorised;
            if (next.access !== undefined) {
                authorised = authorization.authorize(next.access.loginRequired,
                                                     next.access.permissions,
                                                     next.access.permissionCheckType);
                if (authorised === jcs.modules.auth.enums.authorised.loginRequired) {
                    $location.path(jcs.modules.auth.routes.login);
                } else if (authorised === jcs.modules.auth.enums.authorised.notAuthorised) {
                    $location.path(jcs.modules.auth.routes.notAuthorised).replace();
                }
            }
        });
    }]);

这里的关键实际上是'.replace（）'，因为它将当前路由（他们没有权限查看的路由）替换为我们将其重定向到的路由。这将停止任何操作，然后导航回未经授权的路线。

现在我们可以拦截路由了，我们可以做很多很棒的事情，包括登录后重定向如果用户登陆需要登录的路由，则在。

解决方案的第二部分是能够根据那里的权限向用户隐藏/显示UI元素。这可以通过一个简单的指令来实现。

angular.module(jcs.modules.auth.name).directive('access', [  
        jcs.modules.auth.services.authorization,
        function (authorization) {
            return {
              restrict: 'A',
              link: function (scope, element, attrs) {
                  var makeVisible = function () {
                          element.removeClass('hidden');
                      },
                      makeHidden = function () {
                          element.addClass('hidden');
                      },
                      determineVisibility = function (resetFirst) {
                          var result;
                          if (resetFirst) {
                              makeVisible();
                          }

                          result = authorization.authorize(true, roles, attrs.accessPermissionType);
                          if (result === jcs.modules.auth.enums.authorised.authorised) {
                              makeVisible();
                          } else {
                              makeHidden();
                          }
                      },
                      roles = attrs.access.split(',');


                  if (roles.length > 0) {
                      determineVisibility(true);
                  }
              }
            };
        }]);

然后，您将确定像这样的元素：

 <button type="button" access="CanEditUser, Admin" access-permission-type="AtLeastOne">Save User</button>

阅读我的完整博客文章，详细了解该方法。

我没有使用$ resource，因为我只是为我的应用程序手工创建服务调用。就是说，我已经通过拥有一个服务来处理登录，该服务依赖于获取某种初始化数据的所有其他服务。登录成功后，将触发所有服务的初始化。

在我的控制器范围内，我观察了loginServiceInformation并相应地填充了模型的一些属性（以触发适当的ng-show / hide）。关于路由，我使用的是Angular的内置路由，我只是基于此处显示的loggingIn布尔值进行了ng隐藏，它显示了用于请求登录的文本，或者显示了具有ng-view属性的div（因此，如果未登录）登录后立即进入正确的页面，当前我正在加载所有视图的数据，但我认为，如有必要，这可能更具选择性）

//Services
angular.module("loginModule.services", ["gardenModule.services",
                                        "surveyModule.services",
                                        "userModule.services",
                                        "cropModule.services"
                                        ]).service(
                                            'loginService',
                                            [   "$http",
                                                "$q",
                                                "gardenService",
                                                "surveyService",
                                                "userService",
                                                "cropService",
                                                function (  $http,
                                                            $q,
                                                            gardenService,
                                                            surveyService,
                                                            userService,
                                                            cropService) {

    var service = {
        loginInformation: {loggedIn:false, username: undefined, loginAttemptFailed:false, loggedInUser: {}, loadingData:false},

        getLoggedInUser:function(username, password)
        {
            service.loginInformation.loadingData = true;
            var deferred = $q.defer();

            $http.get("php/login/getLoggedInUser.php").success(function(data){
                service.loginInformation.loggedIn = true;
                service.loginInformation.loginAttemptFailed = false;
                service.loginInformation.loggedInUser = data;

                gardenService.initialize();
                surveyService.initialize();
                userService.initialize();
                cropService.initialize();

                service.loginInformation.loadingData = false;

                deferred.resolve(data);
            }).error(function(error) {
                service.loginInformation.loggedIn = false;
                deferred.reject(error);
            });

            return deferred.promise;
        },
        login:function(username, password)
        {
            var deferred = $q.defer();

            $http.post("php/login/login.php", {username:username, password:password}).success(function(data){
                service.loginInformation.loggedInUser = data;
                service.loginInformation.loggedIn = true;
                service.loginInformation.loginAttemptFailed = false;

                gardenService.initialize();
                surveyService.initialize();
                userService.initialize();
                cropService.initialize();

                deferred.resolve(data);
            }).error(function(error) {
                service.loginInformation.loggedInUser = {};
                service.loginInformation.loggedIn = false;
                service.loginInformation.loginAttemptFailed = true;
                deferred.reject(error);
            });

            return deferred.promise;
        },
        logout:function()
        {
            var deferred = $q.defer();

            $http.post("php/login/logout.php").then(function(data){
                service.loginInformation.loggedInUser = {};
                service.loginInformation.loggedIn = false;
                deferred.resolve(data);
            }, function(error) {
                service.loginInformation.loggedInUser = {};
                service.loginInformation.loggedIn = false;
                deferred.reject(error);
            });

            return deferred.promise;
        }
    };
    service.getLoggedInUser();
    return service;
}]);

//Controllers
angular.module("loginModule.controllers", ['loginModule.services']).controller("LoginCtrl", ["$scope", "$location", "loginService", function($scope, $location, loginService){

    $scope.loginModel = {
                        loadingData:true,
                        inputUsername: undefined,
                        inputPassword: undefined,
                        curLoginUrl:"partials/login/default.html",
                        loginFailed:false,
                        loginServiceInformation:{}
                        };

    $scope.login = function(username, password) {
        loginService.login(username,password).then(function(data){
            $scope.loginModel.curLoginUrl = "partials/login/logoutButton.html";
        });
    }
    $scope.logout = function(username, password) {
        loginService.logout().then(function(data){
            $scope.loginModel.curLoginUrl = "partials/login/default.html";
            $scope.loginModel.inputPassword = undefined;
            $scope.loginModel.inputUsername = undefined;
            $location.path("home");
        });
    }
    $scope.switchUser = function(username, password) {
        loginService.logout().then(function(data){
            $scope.loginModel.curLoginUrl = "partials/login/loginForm.html";
            $scope.loginModel.inputPassword = undefined;
            $scope.loginModel.inputUsername = undefined;
        });
    }
    $scope.showLoginForm = function() {
        $scope.loginModel.curLoginUrl = "partials/login/loginForm.html";
    }
    $scope.hideLoginForm = function() {
        $scope.loginModel.curLoginUrl = "partials/login/default.html";
    }

    $scope.$watch(function(){return loginService.loginInformation}, function(newVal) {
        $scope.loginModel.loginServiceInformation = newVal;
        if(newVal.loggedIn)
        {
            $scope.loginModel.curLoginUrl = "partials/login/logoutButton.html";
        }
    }, true);
}]);

angular.module("loginModule", ["loginModule.services", "loginModule.controllers"]);

HTML

<div style="height:40px;z-index:200;position:relative">
    <div class="well">
        <form
            ng-submit="login(loginModel.inputUsername, loginModel.inputPassword)">
            <input
                type="text"
                ng-model="loginModel.inputUsername"
                placeholder="Username"/><br/>
            <input
                type="password"
                ng-model="loginModel.inputPassword"
                placeholder="Password"/><br/>
            <button
                class="btn btn-primary">Submit</button>
            <button
                class="btn"
                ng-click="hideLoginForm()">Cancel</button>
        </form>
        <div
            ng-show="loginModel.loginServiceInformation.loginAttemptFailed">
            Login attempt failed
        </div>
    </div>
</div>

使用上述部分完成图片的基本HTML：

<body ng-controller="NavigationCtrl" ng-init="initialize()">
        <div id="outerContainer" ng-controller="LoginCtrl">
            <div style="height:20px"></div>
            <ng-include src="'partials/header.html'"></ng-include>
            <div  id="contentRegion">
                <div ng-hide="loginModel.loginServiceInformation.loggedIn">Please login to continue.
                <br/><br/>
                This new version of this site is currently under construction.
                <br/><br/>
                If you need the legacy site and database <a href="legacy/">click here.</a></div>
                <div ng-view ng-show="loginModel.loginServiceInformation.loggedIn"></div>
            </div>
            <div class="clear"></div>
            <ng-include src="'partials/footer.html'"></ng-include>
        </div>
    </body>

我在DOM的上方定义了一个ng-controller定义的登录控制器，以便可以基于loggingIn变量更改页面的正文区域。

注意我这里还没有实现表单验证。当然也对Angular还是很新鲜的，因此欢迎任何指向本文的内容的指针。尽管由于它不是基于RESTful的实现而不能直接回答问题，但我相信，由于它基于$ http调用而构建，因此可以适用于$ resources。

我为UserApp编写了一个AngularJS模块，该模块几乎可以完成您所要求的一切。您可以：

1. 修改模块并将功能附加到您自己的API，或者
2. 将该模块与用户管理API UserApp一起使用

https://github.com/userapp-io/userapp-angular

它支持受保护的/公共路由，登录/注销时重新路由，状态检查的心跳，将会话令牌存储在cookie中，事件等。

如果您想尝试UserApp，请参加Codecademy上的课程。

以下是有关其工作原理的一些示例：

• 带有错误处理的登录表单：

  <form ua-login ua-error="error-msg">
      <input name="login" placeholder="Username"><br>
      <input name="password" placeholder="Password" type="password"><br>
      <button type="submit">Log in</button>
      <p id="error-msg"></p>
  </form>
  

• 带有错误处理的注册表单：

  <form ua-signup ua-error="error-msg">
    <input name="first_name" placeholder="Your name"><br>
    <input name="login" ua-is-email placeholder="Email"><br>
    <input name="password" placeholder="Password" type="password"><br>
    <button type="submit">Create account</button>
    <p id="error-msg"></p>
  </form>
  

• 如何指定应公开的路由以及登录表单的路由：

  $routeProvider.when('/login', {templateUrl: 'partials/login.html', public: true, login: true});
  $routeProvider.when('/signup', {templateUrl: 'partials/signup.html', public: true});
  

  该.otherwise()路径应设置为您希望您的用户登录后重定向。例：

  $routeProvider.otherwise({redirectTo: '/home'});

• 注销链接：

  <a href="#" ua-logout>Log Out</a>

  （结束会话并重定向到登录路由）

• 访问用户属性：

  使用该user服务访问用户信息，例如：user.current.email

  或在模板中： <span>{{ user.email }}</span>

• 隐藏仅在登录时才可见的元素：

  <div ng-show="user.authorized">Welcome {{ user.first_name }}!</div>

• 显示基于权限的元素：

  <div ua-has-permission="admin">You are an admin</div>

为了对您的后端服务进行身份验证，只需使用user.token()获取会话令牌并将其与AJAX请求一起发送即可。在后端，使用UserApp API（如果使用UserApp）检查令牌是否有效。

如果您需要任何帮助，请告诉我:)

我已经创建了一个github回购，基本上总结了这篇文章：https : //medium.com/opinionated-angularjs/techniques-for-authentication-in-angularjs-applications-7bbf0346acec

ng-login Github回购

柱塞

我会尽力向您解释，希望能对您有所帮助：

（1）app.js：在应用程序定义上创建身份验证常量

var loginApp = angular.module('loginApp', ['ui.router', 'ui.bootstrap'])
/*Constants regarding user login defined here*/
.constant('USER_ROLES', {
    all : '*',
    admin : 'admin',
    editor : 'editor',
    guest : 'guest'
}).constant('AUTH_EVENTS', {
    loginSuccess : 'auth-login-success',
    loginFailed : 'auth-login-failed',
    logoutSuccess : 'auth-logout-success',
    sessionTimeout : 'auth-session-timeout',
    notAuthenticated : 'auth-not-authenticated',
    notAuthorized : 'auth-not-authorized'
})

（2）身份验证服务：以下所有功能均在auth.js服务中实现。$ http服务用于与服务器进行身份验证过程的通信。还包含授权功能，即是否允许用户执行特定操作。

angular.module('loginApp')
.factory('Auth', [ '$http', '$rootScope', '$window', 'Session', 'AUTH_EVENTS', 
function($http, $rootScope, $window, Session, AUTH_EVENTS) {

authService.login() = [...]
authService.isAuthenticated() = [...]
authService.isAuthorized() = [...]
authService.logout() = [...]

return authService;
} ]);

（3）会话：保留用户数据的单例。这里的实现取决于您。

angular.module('loginApp').service('Session', function($rootScope, USER_ROLES) {

    this.create = function(user) {
        this.user = user;
        this.userRole = user.userRole;
    };
    this.destroy = function() {
        this.user = null;
        this.userRole = null;
    };
    return this;
});

（4）父控制器：将其视为应用程序的“主要”功能，所有控制器均继承自该控制器，并且是此应用程序身份验证的基础。

<body ng-controller="ParentController">
[...]
</body>

（5）访问控制：要拒绝某些路由的访问，必须执行两个步骤：

a）在ui路由器的$ stateProvider服务上添加允许访问每个路由的角色数据，如下所示（对于ngRoute也可以使用）。

.config(function ($stateProvider, USER_ROLES) {
  $stateProvider.state('dashboard', {
    url: '/dashboard',
    templateUrl: 'dashboard/index.html',
    data: {
      authorizedRoles: [USER_ROLES.admin, USER_ROLES.editor]
    }
  });
})

b）在$ rootScope。$ on（'$ stateChangeStart'）上添加该函数，以防止未经授权的用户更改状态。

$rootScope.$on('$stateChangeStart', function (event, next) {
    var authorizedRoles = next.data.authorizedRoles;
    if (!Auth.isAuthorized(authorizedRoles)) {
      event.preventDefault();
      if (Auth.isAuthenticated()) {
        // user is not allowed
        $rootScope.$broadcast(AUTH_EVENTS.notAuthorized);
      } else {d
        // user is not logged in
        $rootScope.$broadcast(AUTH_EVENTS.notAuthenticated);
      }
    }
});

（6）身份验证拦截器：已实现，但无法在此代码的范围内进行检查。在每个$ http请求之后，此拦截器都会检查状态代码，如果返回以下内容之一，则它将广播事件以强制用户再次登录。

angular.module('loginApp')
.factory('AuthInterceptor', [ '$rootScope', '$q', 'Session', 'AUTH_EVENTS',
function($rootScope, $q, Session, AUTH_EVENTS) {
    return {
        responseError : function(response) {
            $rootScope.$broadcast({
                401 : AUTH_EVENTS.notAuthenticated,
                403 : AUTH_EVENTS.notAuthorized,
                419 : AUTH_EVENTS.sessionTimeout,
                440 : AUTH_EVENTS.sessionTimeout
            }[response.status], response);
            return $q.reject(response);
        }
    };
} ]);

PS通过添加directives.js中包含的指令，可以轻松避免第一篇文章中所述的表单数据自动填充错误。

PS2此代码可由用户轻松调整，以允许查看不同的路线，或显示不希望显示的内容。逻辑必须在服务器端实现，这只是在ng-app上正确显示内容的一种方法。