Javascript 在AngularJS中重新加载完整页面后解析用户数据

在我的angular应用程序中，在重新加载整个页面后，我希望能够通过$http.get检索用户信息，如果用户登录（$http.get返回用户信息），那么我希望显示“关于我”页面，如果用户未登录，那么他们应该看到登录页面

目前，我尝试在application.run方法中执行此操作，如下面的代码所示，但由于$http是异步的，$rootScope.currentUser在一段时间内没有设置，因此即使在登录时，$routeChangeStart事件处理程序也会将我传输到登录页面

myAPp.config(function ($routeProvider) {
    $routeProvider.when('/', {
      templateUrl: '/app/homeView/home.html',
      controller: 'HomeViewController'
    }).when('/login', {
      templateUrl: '/app/loginView/login.html',
      controller: 'LoginController'
    }).when('/me', {
      templateUrl: '/app/userInfoView/userInfo.html',
      controller: 'UserInfoController',
      access: {
        requiresLogin: true
      }
    }).otherwise({
      redirectTo: '/'
    });
  }
);

myApp.run(function ($rootScope, $cookies, $location, UserService) {
  UserService.getCurrentUser().then(
    function (response) {
      $rootScope.currentUser = response;
    },
    function () {
      $rootScope.currentUser = null;
    }
  );

  $rootScope.$on('$routeChangeStart', function (event, next) {
    if (next.access !== undefined) {
      if (next.access.requiresLogin && !$rootScope.currentUser) {
        $location.path('/login');
      } else {
        $location.path('/me');
      }
    }
  });
});

解决此问题的正确方法是什么？

您可以：

• 检查用户然后引导应用程序

• 显示状态加载，直到用户检查结束

您可以：

• 检查用户然后引导应用程序

• 显示状态加载，直到用户检查结束

---

遵循@FuzzyTree启动的内容，以下内容应满足您的需要

myApp.run(function($rootScope, $cookies, $location, UserService) {
  var userPromise = UserService.getCurrentUser().then(
    function(response) {
      $rootScope.currentUser = response;
    },
    function() {
      $rootScope.currentUser = null;
    }
  );

  $rootScope.$on('$routeChangeStart', function(event, next) {
    if (next.access !== undefined) {
      if (next.access.requiresLogin && !$rootScope.currentUser) {
        // prevent this change
        event.preventDefault();
        // let user promise determine which way to go
        userPromise.then(function() {
          // will call another `$routeChangeStart` but 
          // that one will pass around the above conditional
          $location.path('/me');// modify using `next.url` if app gets more robust
        }).catch(function() {
          $location.path('/login');
        });

      }
    }
  });
});

---

按照@FuzzyTree启动的内容，下面应该做您需要做的事情

myApp.run(function($rootScope, $cookies, $location, UserService) {
  var userPromise = UserService.getCurrentUser().then(
    function(response) {
      $rootScope.currentUser = response;
    },
    function() {
      $rootScope.currentUser = null;
    }
  );

  $rootScope.$on('$routeChangeStart', function(event, next) {
    if (next.access !== undefined) {
      if (next.access.requiresLogin && !$rootScope.currentUser) {
        // prevent this change
        event.preventDefault();
        // let user promise determine which way to go
        userPromise.then(function() {
          // will call another `$routeChangeStart` but 
          // that one will pass around the above conditional
          $location.path('/me');// modify using `next.url` if app gets more robust
        }).catch(function() {
          $location.path('/login');
        });

      }
    }
  });
});

---

实际上，只有当我删除“event.preventDefault（）；”时，这才有效使用“阻止默认值”时，浏览器中的url会更改，但“/me”的视图从未加载，我只看到一个空白屏幕。实际上，只有在删除“event.preventDefault（）；”时，此操作才有效默认情况下，我的浏览器中的url会更改，但“/me”的视图从未加载，我只看到一个空白屏幕。