在从Rest API

Question

我尝试进行用户登录身份验证，我已经使用方法AuthService创建了一个名为isAuthenticated的服务，我在其中调用API来交叉检查用户是否登录（我以后也会在其中使用用户角色），然后我在$rootScope.$on中调用此服务，但它不等到我的服务从API获取数据，这是我的应用程序。 JS

var app = angular.module('myApp', ['ngRoute', 'ui.router', 'ngAnimate', 'toaster', 'ui.bootstrap']);

app.config(['$routeProvider', '$locationProvider', '$stateProvider', '$urlRouterProvider',
  function ($routeProvider, $locationProvider, $stateProvider, $urlRouterProvider) {
        $stateProvider.
        state('/', {
            url: "/",
            views: {
                header: {
                    templateUrl: 'partials/common/header.html',
                    controller: 'authCtrl',
                },
                content: {
                    templateUrl: 'partials/dashboard.html',
                    controller: 'authCtrl',
                }
            },
            title: 'Dashboard',
            authenticate: true
        })

        .state('login', {
            url: "/login",
            views: {
                content: {
                    templateUrl: 'partials/login.html',
                    controller: 'authCtrl',
                }
            },
            title: 'Login',
            authenticate: false
        })        

        .state('dashboard', {
            title: 'Dashboard',
            url: "/dashboard",
            views: {
                header: {
                    templateUrl: 'partials/common/header.html',
                    controller: 'authCtrl',
                },
                content: {
                    templateUrl: 'partials/dashboard.html',
                    controller: 'authCtrl',
                }
            },
            authenticate: true
        });
        $urlRouterProvider.otherwise("/");

        //check browser support
        if(window.history && window.history.pushState){
            $locationProvider.html5Mode({
                 enabled: true,
                 requireBase: false
            });
        }
  }])
 .run(function ($rootScope, $location, $state, Data, AuthService) {
        $rootScope.$on("$stateChangeStart", function (event, toState, toParams, fromState, fromParams) {
            $rootScope.title = toState.title;
            $rootScope.authenticated = false;
            var userInfo = AuthService.isAuthenticated();
            if (toState.authenticate && !AuthService.isAuthenticated()){
                  // User isn’t authenticated
                  $state.transitionTo("login");
                  event.preventDefault();
            } else {
               alert('here I am ='+$rootScope.authenticated);
            }
        });
    });

这是我的服务

app.factory('AuthService', function ($http, Data, $rootScope) {
  var authService = {};

  authService.isAuthenticated = function () {
    Data.get('index.php/api/authentication/is_login').then(function (results) {
        if (results.uid) {
            $rootScope.authenticated = true;
            $rootScope.uid = results.uid;
            $rootScope.name = results.name;
            $rootScope.email = results.email;
            return results.uid;
        } else {
            return false;
        }
    });
  }
  return authService;
});

到目前为止尝试了很多但没有运气，请提出一个最好的方法，我已经尝试了ui-routes中的解决方法，但没有成功。

提前致谢。

Answer 1

您当前拥有的实现将无法工作，因为Data.get()函数返回Promise，因此是异步的。因此，路由更改将继续进行，而不会等到您的身份验证服务返回任何值。

要解决您的问题，您应该以特定方式处理此异步逻辑：

app.run(function ($rootScope, $location, $state, Data, AuthService) {
  $rootScope.$on('$stateChangeStart', function (event, toState, toParams, fromState, fromParams) {
    /**
     * If the user is heading towards a state that requires
     * authentication, assume that they are not authenticated,
     * and stop them! Otherwise, let them through...
     */
    if (toState.authenticate) {
      event.preventDefault();

      if (toState.name !== fromState.name) {
        // Now check whether or not they are authenticated
        AuthService.isAuthenticated().then(function () {
          // Yes! They're authenticated, continue
          $state.go(toState.name, toParams);
        }, function () {
          // Nope, this user cannot view this page
          alert('You cannot view this page!');
        });
      }
    } else {
      return;
    }
  });
}

  

编辑：我添加了一个检查语句toState.name !== fromState.name来打破任何可能导致对身份验证服务的无限调用的重定向循环。这是对该问题原始海报的评论的回应。

  

诀窍是阻止路由转换，默认。然后，您可以在允许用户进一步移动之前执行所需的异步逻辑。

     

我建议添加微调器或加载窗口，以提醒用户您正在执行此身份验证检查。阻止页面上的任何进一步用户操作也是明智之举，但这完全取决于您。

请注意，函数AuthService.isAuthenticated()现在返回Promise，您必须对身份验证服务进行微小更改才能实现此目的。简单地包装你当前的逻辑：

app.factory('AuthService', function ($http, Data, $rootScope, $q) {
  var authService = {};

  authService.isAuthenticated = function () {
    return $q(function (resolve, reject) {
      Data.get('index.php/api/authentication/is_login').then(function (results) {
        if (results.uid) {
          $rootScope.authenticated = true;
          $rootScope.uid = results.uid;
          $rootScope.name = results.name;
          $rootScope.email = results.email;

          // Great, the user is authenticated, resolve the Promise
          resolve(results.uid);
        } else {
          // The user does not appear to be authenticated, reject the Promise
          reject();
        }
      });
    });
  };

  return authService;
});

我希望这能解决你的问题，Promises可能很痛苦，但它们也可以成为一个非常强大的工具。 GitHub上有一个很好的主题，讨论围绕这个问题的一些潜在解决方案，可以在这里找到：https://github.com/angular-ui/ui-router/issues/1399。

• $q：https://docs.angularjs.org/api/ng/service/$q