Реализация аутентификации с AngularJS и Ui-маршрутизатором

Question

Я пытаюсь справиться с аутентификацией с Ui-маршрутизатором и angularJS, я хотел бы достичь этого нормального сценария, в котором:

• если (пользователь не аутентификация & & состояния требует проверки подлинности), то перейти в состояние «Войти»
• еще если (проверка подлинности пользователя & & состояние не требует аутентификации), то
  перейти к «главному» состоянию
• еще перейти в состояние, запрашиваемое пользователем.

Я внедрил его таким образом, что я не уверен, что это правильно, и мне нужна какая-то проверка от вас, ребята.

У меня есть функция разрешения, которая извлекает информацию о том, аутентифицирован ли пользователь с сервера, если он отклонен, а затем я отправляю пользователя в состояние входа в $ stateChangeError. если он разрешен, я обрабатываю другую логику в $ stateChangeSuccess.

Но поскольку я понимаю, что информация будет доступна только в $ stateChangeSuccess, а не в $ stateChangeStart, поэтому, если я реализую логику, написанную выше в $ stateChangeSucceess, тогда некоторые из страниц будут мерцать до завершения перехода.

Просьба сообщить. Есть ли другой способ или способ улучшить это решение? Я думал создать функцию разрешения для каждого состояния, проверить, аутентифицирован ли пользователь, и сделать там маршрутизацию.

Спасибо.

Answer 1

Это проблема с одностраничными приложениями. Одним из решений, которые я использую на своих угловых страницах, является кэширование идентификатора пользователя и тот факт, что пользователь аутентифицирован в локальном хранилище. Вы также можете добавить к этому истечение. Вот ссылка на локальный модуль хранения: https://github.com/grevory/angular-local-storage (есть и другие).

Затем в каждом состоянии вы можете проверить, не был ли пользователь уже аутентифицирован, а не возвращаться на сервер каждый раз. Кроме того, это поможет кнопкам back/fwd работать лучше. Как правило, в вашем контроллере у вас есть код для проверки подлинности пользователя (который, вероятно, пойдет и проверит локальное хранилище для флага и получит пользовательскую информацию, которая была первоначально получена с сервера).

Я вижу некоторые проблемы с безопасностью, хотя, если браузер разделяется несколькими пользователями.

Эта статья, кажется, список лучше/более новый способ сделать это: https://auth0.com/blog/2014/01/07/angularjs-authentication-with-cookies-vs-token/

Answer 2

используя run функцию в вашем модуле совмещая с сервисом, который знает, если пользователь это проверка подлинности:

angular 
    .module('myApp') 
    .run(runFn); 
runFn.$inject = ['$rootScope', 'MyAuthService', '$state']; 
function runFn($rootScope, MyAuthService, $state){ 

    $rootScope.$on('$stateChangeSuccess', function(e, toState, toParams, fromState, fromParams) { 

      var userAuthenticated = MyAuthService.isLogged(); 

      //* check if the user it's present on cookies 
      //if(!userAuthenticated && $cookieStore.get('user_token')) 
      // If the token is in the cookies i get the user from server 
      //else 
      // $state.go('login') 

      //your logic here 
      /*if (user is not authenticated && state requires authentication) then $state.go('login')*/ 

    }); 

} 

Эта функция будет выполняться всегда, что изменение состояния.