Question

我很难让Angular路线解决问题。我发现这些文档对于javascript框架的更复杂部分来说并不是无用的。

我有以下服务：

app.service("AuthService", ["$http", "$q", function($http, $q){

  this.test = function(){
    return $q(function(resolve, reject){
      var auth = false;
      resolve(auth);
    });
  }

}]);

现在我的路线看起来像这样：

app.config(["$routeProvider", "$locationProvider", function($routeProvider, $locationProvider){

  $locationProvider.html5Mode(true).hashPrefix("!");

  $routeProvider

  .when("/account", {
    templateUrl: "/views/auth/account.html",
    controller: "AccountController",
    resolve: {
      auth: ["AuthService", function(AuthService) {
        return AuthService.test().then(function(auth){
          if (auth) return true;
          else return false;
        });
      }]
    }
  });

}]);

我想在这里发生的事情如下：

用户转到/ account
触发AuthService并返回变量（true或false）
在解决方案中，如果返回的值为false，则无法加载路由
如果返回值为true，则表示用户已通过身份验证并可以查看路由

我认为我还没有完全理解如何使用resolve和我的方法到目前为止无效。有人可以解释正确的方法吗？

Answer 1

配置路由时的解析块旨在根据promise的解析或拒绝使条件导航。

您正试图通过解析值为true或false

来解决此问题

请尝试以下方法：

resolve: {
  auth: ["AuthService", function(AuthService) {
    return AuthService.test().then(function(auth){
      if (!auth){
        throw 'not authorized';
      }
    });
  }]
}

这将导致承诺被拒绝，因此不允许路由继续/完成。

另外值得注意的是，承诺解决方案中的值将被注入处理控制器

Answer 2

此解决方案适用于我，我也尝试使用.then函数，但它不正确，因为resolve执行它。

resolve: {
auth:
    ["AuthService", "AnotherService", "$rootScope", function(AuthService, AnotherService, $rootScope) {
        if ($rootScope.yourCondition){
            return AuthService.getFunction();
        }
        else{
            return AnotherService.getAnotherFunction();
        }
    }]
},
views: {
'partialView@': {
    /* == Component version == */
    component: "yourComponent",
    bindings: {
        auth: 'auth',      // Inject auth loaded by resolve into component
        params: '$stateParams'
    }
}
}

Angular route解析调用服务

2 个答案: