使用`$ q（解析，拒絕）在AngularJs中登錄時間'

Question

我在角度應用中遇到了登錄時間問題。我的意圖是，當用戶登錄時，API密鑰將在localStorage中設置，並可用於訪問API。登錄後，我希望應用將用戶重定向到主頁狀態。但是，發生的事情是用戶被重定向，得到一個401 - 並基於我設置的 - 然後被重定向回登錄。如果我在登錄後在瀏覽器上進行硬刷新，它就可以工作。這是我的目標。

.factory('localStor', function($q, $log, $window, $rootScope) { 
var apiKey = false; 

return { 
    getAPI: function() { 
     return $q(function(resolve, reject) { 
      var data = $window.localStorage.getItem('apiKey'); 

      if (data == null) { 

       return $rootScope.$broadcast('notAuthorized'); 
      } else { 
       var key = data; 
       return resolve(key); 

      } 

     }); 
    }, 
    setAPI: function(key) { 
     return $q(function(resolve, reject) { 
      apiKey = false; 
      if (key === undefined) { 
       return reject(); 
      } 

      return $window.localStorage.setItem('apiKey', key); 
     }); 
    } 
} 


}) 

function getLogin(email, password) { 
    return $q(function(resolve, reject) { 
     $http({ 
      method: 'POST', 
      data: { 
       'email': email, 
       'password': password 
      }, 
      url: config.api.baseUrl + '/user/login' 
     }).then(function(result) { 
      if (result) { 
       var token = result.data.data.token; 
       resolve(token); 
      } else { 
       $log.debug('Incorrect email or password'); 
       reject(1); 
      } 
     }, function(reason) { 
      reject(2); 
     }); 

    }) 
} 

$scope.submitLogin = function(email, password, form) { 

    $scope.errorNote = false; 

    if (form.$valid) { 
     $scope.loading = true; 
     login.getAPI(email, password).then(function(data) { 
      var key = data; 
      localStor.setAPI(key).then(function() { 
       $timeout(function() { 
        $state.go('app.loading', {}, { reload: true }); 
       }, 30); 
      }); 
      $scope.loading = false; 


     }, function(reason) { 
      $scope.errorNote = reason; 
      $scope.loading = false; 
     }); 

    } 
}; 

我的API調用，然後建立這樣

var apiKey = false; 
localStor.getAPI().then(function(data) { 
    apiKey = data; 
    $log.debug(apiKey); 
}, function() { 
    $rootScope.$broadcast('notAuthorized'); 
}); 

function withApiKey(callback, errorcallback) { 
    localStor.getAPI().then(function(data) { 
     if (typeof callback === 'function') { 
      callback(data); 
     } 
    }, function(err) { 
     if (typeof errorcallback === 'function') { 
      errorcallback(err); 
     } 
    }); 
} 

function notificationCount() { 
    return $q(function(resolve, reject) { 
     withApiKey(function(key) { 
      $http({ 
       method: 'GET', 
       headers: { 'Authorization': 'Bearer ' + key }, 
       url: config.api.baseUrl + '/user/notifications/count' 
      }).then(function(result) { 
       if (result) { 
        resolve(result); 
       } else { 
        reject('Uh Oh'); 
       } 
      }, function() { 
       reject('Uh Oh'); 
      }); 
     }); 
    }) 
} 

Answer 1

最終成爲變量不匹配。一旦不匹配被處理，上述承諾結構運作良好。

Answer 2

這是一個$q(resolve, reject) Anti-Pattern?

使用$q(resolve, reject)與$http服務是$q defer anti-pattern的另一個例子。這是不必要的，並且容易出現錯誤的實施。

只需return$http承諾。其使用方法.then改造響應：

function getLogin(email, password) { 
    ̶r̶e̶t̶u̶r̶n̶ ̶$̶q̶(̶f̶u̶n̶c̶t̶i̶o̶n̶(̶r̶e̶s̶o̶l̶v̶e̶,̶ ̶r̶e̶j̶e̶c̶t̶)̶ ̶{̶ 
    ͟r͟e͟t͟u͟r͟n͟ $http({ 
      method: 'POST', 
      data: { 
       'email': email, 
       'password': password 
      }, 
      url: config.api.baseUrl + '/user/login' 
     }).then(function(result) { 
      if (result) { 
       var token = result.data.data.token; 
       ̶r̶e̶s̶o̶l̶v̶e̶(̶t̶o̶k̶e̶n̶)̶;̶ 
       ͟r͟e͟t͟u͟r͟n͟ token; 
      } else { 
       $log.debug('Incorrect email or password'); 
       ̶r̶e̶j̶e̶c̶t̶(̶2̶)̶;̶ 
       ͟t͟h͟r͟o͟w͟ 1; 
      } 
     }, function(reason) { 
      ̶r̶e̶j̶e̶c̶t̶(̶2̶)̶;̶ 
      ͟t͟h͟r͟o͟w͟ 2; 
     }); 
    }) 
} 

的.then方法返回一個新承諾就解決到什麼各自處理或者return或throw。

欲瞭解更多信息，請參閱You're Missing the Point of Promises。