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);
                 });
            }
    });

我想从中实现的两件主要事情是，

页面刷新时，必须从浏览器的本地存储中获取user和session信息。
如果用户未定义，则必须将其重定向到登录页面。它用于限制用户在不登录的情况下转到中间页面。

如果用户为undefined，并且本地存储中的数据不可用，则第一个if statement会出错，第二个if statement不起作用。

因此，当用户第一次尝试访问任何页面而不进入登录页面时，它不会重定向到登录页面，因为代码在第一个if statement失败，第二个if没有工作。

如何同时实现这两种功能？

谢谢

Answer 1

您可以创建authInterceptor工厂并将其推送到interceptors。

此方法将始终检查用户是否在每个页面上登录，如果用户未经过身份验证，则会将用户置于登录页面

出于全局错误处理，身份验证或任何类型的目的请求或的同步或异步预处理对响应进行后处理，希望能够进行拦截在将它们交给服务器和响应之前请求它们被移交给发起这些的应用程序代码要求。 拦截器利用promise API来满足＆gt;同步和异步预处理的需要。

详细了解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'
        }
      });
  });

使用Above Mechanism，您可以使用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

AngularJS：页面刷新时保留登录信息

2 个答案: