Question

我刚刚开始使用Angular和Express，并且面临艰难时期。我来自java背景，想学习Angular和Express，因此尝试构建一个小应用程序。

我正在尝试做什么：我已向用户提供了密码重置链接，以便更改其密码。链接类似于：

本地主机：9000 /复位/：令牌

现在，我创建了一个简单的视图，显示一个输入框，如果令牌有效则更改其密码，否则如果令牌无效，则根据角度的ng-show属性打印错误。

问题：在我可以渲染上面创建的视图之前，我希望ui-router检查：token是否有效。我将使用控制器中令牌的有效性信息来控制上面提到的ng-show属性。

在阅读this之后，我试图利用$ stateProvider.state功能和解决方案，以便将令牌验证的响应作为先决条件。这将有助于我渲染实际视图，我使用ng-show技术显示错误消息或输入框，以根据ui-router resolve promiseObject更改密码。

现在有什么问题？

好吧，经过长时间的打击，我决定在这里发布我的问题。有人可以帮我吗？

我的问题：

1。我能够从api调用中获取数据/错误但不知何故ui-router没有在我的控制器中注入它。谁能告诉我，我在这里做错了什么？

2。现在，如果令牌无效，我将从后端api返回404作为回应。但前端的工厂方法将其视为错误（这是在Node.js中预期的吗？）并且抛出错误导致deferred.reject（）。现在，如果我使用ui-router定义，如果未解决承诺，则视图不会被渲染，对吧？有什么方法可以将这个错误传递给我的控制器吗？我要求传递错误的原因是，我的视图显示逻辑基于响应代码（4xx / 2xx），具体取决于我将显示错误消息或输入框。<\ n / p>

代码段：

调用其余api的工厂方法：

  isPasswordResetTokenValid: function(token, callback) {
    var cb = callback || angular.noop;
    var deferred = $q.defer();

    return User.getUserByPasswordResetToken(token,
      function(data) {
        deferred.resolve(data);
        return cb(data);
      },
      function(err) {
        deferred.reject(err);
        return cb(err);
      }.bind(this)).$promise;
  } 


'use strict';

angular.module('scrubApp')
  .config(function ($stateProvider) {
    $stateProvider
      .state('passwordreset', {
        url: '/reset/:token',
        templateUrl: 'app/account/passwordreset/passwordreset.html',
        resolve: { 

          promiseObj2: function($stateParams, Auth){
              var token = $stateParams.token;
              console.log(token);
               var response = Auth.isPasswordResetTokenValid({token: token})
              .then( function(response) {
                  console.log(response); // shows response
                  if(response.status == 404) {
                    //$scope.token-expiry = true;
                    return response;
                  }
                  if(response.status == 200) {
                    // $scope.user = response.data;
                  }
              })
              .catch( function(err) {
                console.log(err); // shows error
                return err;
              });
          }
        },
        controller: 'ResetPasswordCtrl'  
      });
  });

ResetPasswordCtrl控制器：

'use strict';

angular.module('myApp')
  .controller('ResetPasswordCtrl', function ($scope, User, Auth, Mailer, $stateParams, promiseObj2) {
    $scope.errors = {};
    $scope.user = {};

    console.log(promiseObj2);   // This is coming undefined
    $scope.isTokenExpired = promiseObj2;  // Not able to inject promiseObj2

    $scope.isFormSubmitted = false;


  });

提前致谢

Answer 1

您的决心promiseObj2应该返回承诺服务的承诺，以便您的控制器等到承诺得到解决。

return Auth.isPasswordResetTokenValid({token: token})

<强>更新

如果你想在令牌请求失败时处理一些逻辑，那么你可以在你的承诺中处理它，这可以做几件事情，如

您可以使用$state.go('login')或$state.go('error')页面重定向到其他页面。

<强>代码

promiseObj2: function($stateParams, Auth, $state){
  var token = $stateParams.token;
  console.log(token);
  return Auth.isPasswordResetTokenValid({token: token}) //added return here
  .then( function(response) {
    console.log(response); // shows response
    if(response.status == 404) {
        $state.go('error')
    }
    if(response.status == 200) {
        return response;
    }
  })
  .catch( function(err) {
    console.log(err); // shows error
    return err;
  });
}

如果您想要出现错误，无论如何都要显示html页面，那么您还可以从.then promiseObj2对象中返回有关错误消息信息的数据。因此错误信息是return到控制器

<强>代码

promiseObj2: function($stateParams, Auth, $state){
  var token = $stateParams.token;
  console.log(token);
  return Auth.isPasswordResetTokenValid({token: token}) //added return here
  .then( function(response) {
    console.log(response); // shows response
    if(response.status == 404) {
      return {status: 404, data: "doen't found resource"}
    }
    if(response.status == 200) {
        return response;
    }
  })
  .catch( function(err) {
    console.log(err); // shows error
    return err;
  });
}

然后在控制器内部，我们将解析promiseObj2对象的承诺，然后您将在其.then函数中获得错误值。

angular.module('myApp')
.controller('ResetPasswordCtrl', function ($scope, User, Auth, Mailer, $stateParams, promiseObj2) {
  $scope.errors = {};
  $scope.user = {};
  promiseObj2.then(function(resp){
    console.log(resp)
    $scope.isTokenExpired = resp.isTokenExpired;
  }, function(err){
    console.log(err)
  })
});

<强>更新

如果我们想要处理服务器返回4XX状态的条件，这意味着我们的ajax将调用不会返回promise的catch函数。我们可以使用$q创建自定义承诺来解决此问题，我们将从promiseObj2

<强>代码

promiseObj2: function($stateParams, Auth, $state, $q){
  var token = $stateParams.token,
      deffered = $q.defer();
  console.log(token);
  Auth.isPasswordResetTokenValid({token: token}) //added return here
  .then( function(response) {
    console.log(response); // shows response
    if(response.status == 404) {
      //return {status: 404, data: "doen't found resource"}
      deffered.resolve({status: 404, data: "doen't found resource"});
    }
    if(response.status == 200) {
      //return response;
      deffered.resolve(response);
    }
  })
  .catch( function(err) {
    console.log(err); // shows error
    deffered.resolve(err);
  });
  return deffered.promise;
}

Angular ui-router没有将解析注入控制器

1 个答案: