я написал модуль AngularJS на UserApp что делает почти все, что вы попросите. Можно:

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>

• показать элемент на основе permissions:

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

и для аутентификации в ваших серверных службах просто используйте user.token() чтобы получить токен сеанса и отправить его с запросом AJAX. В конце используйте API для UserApp (если вы используете UserApp), чтобы проверить, является ли токен допустимым или нет.

Если вам нужна помощь, просто дайте мне знать :)

я не использую $resource, потому что я просто вручную создаю свои служебные вызовы для своего приложения. Тем не менее, я обработал login, имея службу, которая зависит от всех других служб, которые получают какие-то данные инициализации. При успешном входе в систему запускается инициализация всех служб.

В моей области контроллера я наблюдаю loginServiceInformation и заполняю некоторые свойства модели соответственно (чтобы вызвать соответствующий ng-show/hide). Что касается маршрутизации я использую угловой встроенный маршрутизации и я просто НГ-скрыть на основе сеанса в поле логическое значение, показанное здесь, он показывает текст запроса, войдите или другой 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>

у меня есть контроллер входа, определенный с ng-контроллером выше в DOM, чтобы я мог изменить область тела моей страницы на основе переменной loggedIn.

Примечание я еще не реализовал проверку формы здесь. Также, по общему признанию, все еще довольно свежо для Angular, поэтому любые указатели на вещи в этом посте приветствуются. Хотя это не отвечает на вопрос напрямую, так как это не реализация на основе RESTful, я считаю, что то же самое можно адаптировать к $ resources поскольку он построен поверх $ http-вызовов.

Я создал РЕПО GitHub, суммируя эту статью в основном: https://medium.com/opinionated-angularjs/techniques-for-authentication-in-angularjs-applications-7bbf0346acec

ng-войти GitHub РЕПО

Plunker

я постараюсь объяснить как можно лучше, надеюсь, я помогу некоторым из вас:

(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) управление доступом: чтобы запретить доступ по определенным маршрутам, необходимо выполнить 2 шага:

a) добавьте данные ролей, разрешенных для доступа к каждому маршруту, на сервисе $stateProvider ui router, как показано ниже (то же самое может работать для 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);
        }
    };
} ]);

П. С. ошибка с автозаполнением данных формы, как указано в 1-й статье, можно легко избежать, добавив директиву, которая включена в директивы.js.

П. С. 2 этот код может быть легко изменен пользователем, чтобы можно было видеть различные маршруты или отображать контент, который не должен отображаться. Логика должна быть реализована на стороне сервера, это просто способ показать все правильно на вашем ng-приложении.