使用`$ q（resolve，reject）`在AngularJs中登录时间

Question

我在角度应用中遇到登录时间问题。我的目的是当用户登录时，然后在localStorage中设置API密钥，并且可以调用API密钥来访问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

这是$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。

Answer 2

结束了变量不匹配。一旦不匹配得到照顾，上述承诺结构就能很好地发挥作用。