在AngularJS

Question

在我的角度应用程序中，在完成整页重新加载后，我希望能够通过$ http.get检索用户信息，如果用户已登录（$ http.get返回用户信息），那么我想要显示关于我＆＃39;页面，如果用户未登录，则应该看到登录页面。

目前我尝试在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');
      }
    }
  });
});

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

Answer 1

在@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');
        });

      }
    }
  });
});

Answer 2

你可以：

• 检查用户然后启动角度应用程序https://docs.angularjs.org/api/ng/function/angular.bootstrap

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