с использованием заголовка auth для предотвращения доступа к странице

Question

При входе в систему я храню внутри localstorage username и token для зарегистрированного пользователя, где потом я создаю auth. которые отправляют запрос.

Обновление: , что более конкретно. У меня есть userService который succ. ставить и извлекать данные пользователей из localstorage, где у меня есть username, sessionId и isLogged.

Мой вопрос: Теперь, имея Auth. заголовок, вся информация, которая мне нужна о зарегистрированном пользователе внутри localstorage, как я могу написать обработчик события, чтобы проверить, вошел ли пользователь в систему перед каждым изменением маршрута.

Должен ли я сделать это на app.js, где я запускаю свое приложение и внедряю userService? если да как.

(function() { 
    "use strict"; 
    var app = angular.module("myApp", 
     ["common.services", 
      "ui.router", 
      "ui.mask", 
      "userService", 
      "ui.bootstrap"]); 
    .... 

Как я могу теперь использовать эту хранимую заголовок аутентификации, чтобы получить доступ/запретить доступ к конкретным страницам?

Update 2: app.js

(function() { 
    "use strict"; 
    var app = angular.module("myApp", 
     ["common.services", 
      "ui.router", 
      "ui.mask", 
      "userService", 
      "ui.bootstrap"]);   

    app.config(["$stateProvider", "$urlRouterProvider", 
      function ($stateProvider, $urlRouterProvider) { 
       $urlRouterProvider.otherwise("/"); 

       $stateProvider 
        .state("index", { 
         url: "/", 
         templateUrl: "app/index.html", 
        }) 
        // Restricted 
        .state("home", { 
         url: "/home", 
         templateUrl: "app/home/home.html", 
         controller: "HomeController as vm" 
        }) 
      }] 
    ); 
}()); 

Answer 1

Вы можете достичь этого путем маркировки необходимых маршрутов с пользовательским атрибутом и проверок, что маркер действителен, когда «место» меняется.

Update Предполагая, что вы можете проверить, что пользователь прошел проверку подлинности путем проверки isLogged свойства userService:

(function() { 
"use strict"; 
var app = angular.module("myApp", 
    ["common.services", 
     "ui.router", 
     "ui.mask", 
     "userService", 
     "ui.bootstrap"]); 

app.config(["$stateProvider", "$urlRouterProvider", 
    function ($stateProvider, $urlRouterProvider) { 
     $urlRouterProvider.otherwise("/"); 

     $stateProvider 
      .state("index", { 
       url: "/", 
       templateUrl: "app/index.html", 
      }) 
      // Restricted 
      .state("home", { 
       url: "/home", 
       templateUrl: "app/home/home.html", 
       controller: "HomeController as vm", 
       data: { 
        requiresLogin: true 
       } 
      }) 
    }] 
).run(['$rootScope', '$state', 'userService', function($rootScope, $state, userService) { 
    $rootScope.$on('$stateChangeStart', function(e, to) { 
     if (to.data && to.data.requiresLogin && !userService.isLogged) { 
      e.preventDefault(); 
      $state.go('index'); 
     } 
    }) 
}]); 
}()); 

Answer 2

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

например, чтобы перейти на главную страницу, вы должны быть зарегистрированы в системе

.when("/home", { 
templateUrl: "homeView.html", 
controller: "homeController", 
resolve: { 
    user: function(AuthenticationService){ 
     return AuthenticationService.getUser(); 
    } 
    } 
}) 

app.controller("homeController", function ($scope, user) { 
    $scope.user = user; 
}); 

хороший пример: https://www.sitepoint.com/implementing-authentication-angular-applications/