AngularJS：頁面刷新時保留登錄信息

Question

我正在嘗試在頁面刷新時保留用戶信息。 我為此使用cookieStore 。 因此，我在Angular App中的運行模塊如下所示。

.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. 如果未定義用戶，則必須將其重定向到登錄頁面。 它用於限制用戶無需登錄即可進入中間頁面。

如果user是undefined ，並且本地存儲中沒有數據，則第一個if statement給出錯誤，第二個if statement不起作用。

因此，當用戶試圖訪問的任何頁面第一次沒有去到登錄頁面，它不重定向到登錄頁面，因為代碼中第一個失敗的if statement ，第二個if不能正常工作。

如何一起實現這兩個功能？

謝謝

Answer 1

您可以創建一個authInterceptor工廠並將其推入interceptors 。

此方法將始終檢查用戶是否已在每個頁面上登錄，如果用戶未通過身份驗證，則會將其扔到登錄頁面上

出於全局錯誤處理，身份驗證或請求的任何同步或異步預處理或響應的后處理目的，希望能夠在將請求移交給服務器之前攔截請求，並在將請求移交給服務器之前將響應攔截發起這些請求的應用程序代碼。 攔截器利用promise 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服務來獲取任何controller或directives user信息，如下所示：

.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