Разрешить доступ к проверке в Angular

Я работаю в шаблоне веб-приложения Angular, взятом git. Я не могу понять функцию, которая, я полагаю, проверяет, есть ли у пользователя авторизация. Не так ли? Моя цель - иметь функцию, которая делает вход в систему. Возьмите ответ и сохраните токен. Затем, когда состояние $ изменится, проверьте, есть ли еще токен. Как я могу сделать? Это код:

ядро.js:

'use strict'; 

angular.module('app.core').controller('App', ['config', '$scope', '$state', '$rootScope', 'shortHistory','session', '$window', 'authorize', function(config, $scope, $state, $rootScope, shortHistory, session, $window, 'authorize') {

var vm = this;

vm.title = config.appTitle;

$scope.app = config;
$scope.$state = $state;
vm.currentUser = null;

$rootScope.$on('$stateChangeStart', function(event, toState, toParams, fromState, fromParams) {
  authorize.checkAccess(event, toState, toParams);
});

$scope.$on('$stateChangeSuccess', function(event, toState, toParams, fromState, fromParams) {
  $('body').toggleClass('nav-shown', false);
});

$rootScope.$on('$userSet', function(event, user) {
  vm.currentUser = user;
  $window.localStorage.setItem('token', vm.currentUser.token);
});

shortHistory.init($scope);

}]);

общий.js:

(function() {
'use strict';

angular.module('app.common')
  .service('shortHistory', shortHistory)
  .service('session', session)
 // .service('authorize', authorize)
  .service('authenticationService', authenticationService);

shortHistory.$inject = ['$state'];
function shortHistory($state) {
  var history = this;

  function setItem(what, state, params) {
    history[what] = {
      state: state,
      params: params
    };
  }

  this.init = function(scope) {
    scope.$on('$stateChangeSuccess', function(event, toState, toParams, fromState, fromParams){
      setItem('from', fromState, fromParams);
      setItem('to', toState, toParams);
    });
  };

  this.goTo = function(where) {
    $state.go(history[where].state.name, history[where].params)
  };
}

session.$inject = ['$http', '$q', '$rootScope'];
function session($http, $q, $rootScope) {
  var session = this;

  this.fetchCurrentUser = function(url) {
    var userFetch;
    if (session.getCurrentUser()) {
      userFetch = $q(function(resolve) {
        resolve(session.getCurrentUser());
      });
    } else {
      userFetch = $http.get(url);
    }
    return userFetch;
  };

  this.getCurrentUser = function() {
    return this.user;
  };

  this.setCurrentUser = function(user) {
    this.user = user;
    $rootScope.$broadcast('$userSet', this.user);
  };
}
/* THIS IS THE CODE THAT I'VE NOT TOUCHED, IT WAS IN THE TEMPLATE
authorize.$inject = ['session', '$state', '$urlRouter', '$rootScope'];
function authorize(session, $state, $rootScope) {
  this.checkAccess = function(event, toState, toParams) {
    if (!session.getCurrentUser() && !(toState.data && toState.data.noAuth)) {
      event.preventDefault();
      session.fetchCurrentUser('api/sers')
        .success(function(user) {
          session.setCurrentUser(user);
          $state.go(toState.name, toParams);
        })
        .error(function() {
          $state.go('login');
        });
      }
  };
}
*/
authenticationService.$inject = ['$http', '$rootScope', 'session', '$state'];
function authenticationService($http, $rootScope, session) {
  var vm = this;
  vm.loginError = '';
  this.login = function(user) {
    var userData = {
      email: user.email,
      password: user.password
    }
    return $http.post('api/login/', userData)
      .success(function(data) {
        var loggedUser = jQuery.extend(data, userData);
        session.setCurrentUser(loggedUser);
        $rootScope.$broadcast('$userLoggedIn');
      });
  };

  var token = localStorage.getItem('token');

  this.logout = function() {
    return $http.post('api/logout/', token)
      .success(function(data) {
        session.setCurrentUser(null);
        $rootScope.$broadcast('$userLoggedOut');
      });
  }
}

})();

Авторизация.js:

 (function() {
 'use strict';

 angular.module('app.profile')
  .controller('LoginController', loginController)
  .run(runAuth);

loginController.$inject = ['authenticationService'];
function loginController(
  authenticationService
  ) {
  var vm = this;
  vm.user = {};
  vm.loginError = '';

  this.login = function() {
    authenticationService.login(vm.user)
      .then(null, function(err) {
        vm.loginError = err.data.result;
      });
  };
}

runAuth.$inject = ['$rootScope', '$state', 'authenticationService'];
function runAuth($rootScope, $state, authenticationService) {
  $rootScope.logout = authenticationService.logout;
  $rootScope.$on('$userLoggedIn', function() {
    $state.go('app.dashboard');
  });
  $rootScope.$on('$userLoggedOut', function() {
    $state.go('login');
  });
}
})();

профиль.модуль.js:

'use strict';

angular.module('app.profile', ['ui.router'])

.config(['$stateProvider', function($stateProvider) {
  $stateProvider
    .state('login', {
      url: '/login',
      data: {
        noAuth: true
      },
      templateUrl: 'app/modules/profile/auth/login.html',
      controller: 'LoginController',
      controllerAs: 'vm'
    })
    .state('app.profile', {
      url: '/profile',
      templateUrl: 'app/modules/profile/edit/edit.html',
      controller: 'ProfileController',
      controllerAs: 'vm'
    });
  }]);

Исходный проект таков: https://github.com/flatlogic/angular-dashboard-seed Я не могу понять, как работает эта аутентификация и куда вставлять контроллер для аутентификации. Например, прямо сейчас я не могу войти в систему, но не могу выйти из нее, и даже если у меня нет токена, я могу правильно перейти к /dashboard или /profile, который должен просматриваться только зарегистрированным пользователем.


person panagulis72    schedule 15.04.2016    source источник


Ответы (1)


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

  • Используйте свой внутренний сервер для установки информации о сеансе (обычно файл cookie в заголовке HTTP), а затем не выполняйте никаких локальных манипуляций в коде AngularJS. Я вижу некоторые области, где вы проверяете локальное хранилище. Проще и безопаснее просто позволить серверной части установить флаг только для HTTP на true и построить логику приложения, не зная идентификатора сеанса.
  • Используйте перехват, чтобы перенаправить 401 ajax-запрос на вашу страницу входа. Это позволит вам обрабатывать случаи тайм-аутов сеанса, несанкционированных посещений маршрутов и т. д. Очень простой обработчик, который будет выполнять большую часть логики перенаправления https://docs.angularjs.org/api/ng/service/$http#interceptors
  • В зависимости от вашей маршрутизации (похоже, вы используете UI Router) вы можете управлять разрешениями для определенных маршрутов на основе пользователя, возвращенного из вашей службы аутентификации. Самая чистая реализация, с которой я сталкивался, использовала UI Router и вложенные состояния. Состояния, требующие аутентификации, имеют настроенный корневой параметр «разрешить», который выполняет проверку сеанса пользователя (может быть, просто простой HTTP GET для защищенной конечной точки, чтобы определить, прошел ли пользователь аутентификацию). Вы по-настоящему оцените эту архитектуру, когда вам нужно знать пользователя в любом заданном контроллере, и вы всегда можете знать, что ваша пользовательская служба уже выяснила это (и вам не нужно полагаться на широковещательные рассылки).

Например:

$stateProvider
  .state('rootProtected', {
    templateUrl: '/js/views/rootProtected.html',
    resolve: {
      data: function(coreuser) {
        return user.initialize();
      }
    }
  })
  .state('rootProtected.userProfile', {
    templateUrl: '/js/views/userProfile.html'
  })
  .state('public', {
    templateUrl: '/js/views/login.html'
  });
  • Старайтесь не создавать слишком много сервисов/фабрик вокруг управления сеансами. Я вижу это в учебниках по всему Интернету. На самом деле, просто создайте основной пользовательский сервис, который выполняет вход пользователя, выход пользователя из системы, проверку пользователя, получение пользователя и т. д. Вы начнете понимать, что многие данные взаимосвязаны и нет причин разбрасывать логику между ними. несколько услуг или широковещательных событий.
person r0m4n    schedule 19.04.2016