AngularJS: сохранение информации для входа при обновлении страницы

Question

Я пытаюсь сохранить информацию о пользователе при обновлении страницы. я использовал cookieStore для этого. Поэтому мой модуль запуска в приложении Angular выглядит следующим образом.

.run(['$rootScope', '$cookieStore', '$state', function($rootScope, $cookieStore, $state) {
    $rootScope.$on('$stateChangeStart', function(event, toState, toParams, $location){
        var requireLogin = toState.data.requireLogin;

            if(typeof $rootScope.user == 'undefined'){
                $rootScope.user=$cookieStore.get("user");
                $rootScope.sessionid=$cookieStore.get("session");
            }
            if(requireLogin && typeof $rootScope.user === 'undefined'){
                event.preventDefault();
                 $state.go('login', null, {notify: false}).then(function(state) {
                        $rootScope.$broadcast('$stateChangeSuccess', state, null);
                 });
            }
    });

Вот две основные вещи, которые я хотел бы достичь:

1. Должен получить user а также sessionинформация из локального хранилища браузера, когда страница обновляется.
2. Если пользователь не определен, он должен быть перенаправлен на страницу входа. Он предназначен для ограничения доступа пользователей к промежуточным страницам без входа в систему.

Если пользователь undefinedи данные не доступны в локальном хранилище, первый if statement выдает ошибку и второе if statement не работает.

Таким образом, когда пользователь пытается зайти на какую-либо страницу в первый раз, не заходя на страницу входа, он не перенаправляет на страницу входа, потому что код сначала не удался if statement, второй if не работает.

Как я могу достичь обеих функций вместе?

Спасибо

Answer 1

Вы можете создать authInterceptor завод и вставь interceptors,

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

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

Узнайте больше о перехватчиках

'use strict';

angular.module('app', [
    'ngCookies',
    'ngResource',
    'ngSanitize',
    'ngRoute'
  ])
  .config(function($routeProvider, $locationProvider, $httpProvider) {
    $routeProvider
      .otherwise({
        redirectTo: '/'
      });

    $httpProvider.interceptors.push('authInterceptor');
  })

.factory('authInterceptor', function($rootScope, $q, $cookieStore, $location) {
  return {
    // Add authorization token to headers
    request: function(config) {
      config.headers = config.headers || {};
      if ($cookieStore.get('token')) {
        config.headers.Authorization = 'Bearer ' + $cookieStore.get('token');
      }
      return config;
    },

    // Intercept 401s and redirect you to login
    responseError: function(response) {
      if (response.status === 401) {
        $location.path('/login');
        // remove any stale tokens
        $cookieStore.remove('token');
        return $q.reject(response);
      } else {
        return $q.reject(response);
      }
    }
  };
})

.run(function($rootScope, $location, Auth) {
  // Redirect to login if route requires auth and you're not logged in
  $rootScope.$on('$routeChangeStart', function(event, next) {
    Auth.isLoggedInAsync(function(loggedIn) {
      if (next.authenticate && !loggedIn) {
        $location.path('/login');
      }
    });
  });
})

.factory('Auth', function Auth($location, $rootScope, $http, User, $cookieStore, $q) {
    var currentUser = {};
    if ($cookieStore.get('token')) {
      currentUser = User.get();
    }

    return {
      /**
       * Gets all available info on authenticated user
       *
       * @return {Object} user
       */
      getCurrentUser: function() {
        return currentUser;
      },

      /**
       * Check if a user is logged in
       *
       * @return {Boolean}
       */
      isLoggedIn: function() {
        return currentUser.hasOwnProperty('role');
      },

      /**
       * Waits for currentUser to resolve before checking if user is logged in
       */
      isLoggedInAsync: function(cb) {
        if (currentUser.hasOwnProperty('$promise')) {
          currentUser.$promise.then(function() {
            cb(true);
          }).catch(function() {
            cb(false);
          });
        } else if (currentUser.hasOwnProperty('role')) {
          cb(true);
        } else {
          cb(false);
        }
      }
    };
  })

 .factory('User', function($resource) {
      return $resource('/api/users/:id/:controller', {
          id: '@_id'
        }
      });
  });

С вышеупомянутым механизмом, вы можете использовать Auth сервис, чтобы получить user информация в любом controller или же directives как:

.controller('MainCtrl', function ($scope, Auth) {
  $scope.currentUser = Auth.getCurrentUser;
});

в файле шаблона:

<div ng-controller="MainCtrl">
  <p> Hi {{currentUser().name}}!</p>
</div>

Примечание: вам нужно создать правильный API REST, чтобы получить правильный user данные

Answer 2

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

https://github.com/gsklee/ngStorage