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 обещаний для выполнения этой потребности для> синхронной и асинхронной предварительной обработки.

Узнайте больше о Interceptors

'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> 

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

Answer 2

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

https://github.com/gsklee/ngStorage