使用 `$q(resolve, reject)` 在 AngularJs 中登录计时
Login Timing in AngularJs using `$q(resolve, reject)`
我在 angular 应用程序中遇到登录时间问题。我的意图是,当用户登录时,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');
});
});
})
}
这是
使用 $q(resolve, reject)
和 $http
服务是 的另一个例子。没有必要,容易出错
只是 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
方法 returns 一个 new promise 解决了各自的处理程序 return 或 throw .
有关详细信息,请参阅 You're Missing the Point of Promises。
最终成为变量不匹配。解决了不匹配问题后,上述承诺结构运行良好。
我在 angular 应用程序中遇到登录时间问题。我的意图是,当用户登录时,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');
});
});
})
}
这是
使用 $q(resolve, reject)
和 $http
服务是
只是 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
方法 returns 一个 new promise 解决了各自的处理程序 return 或 throw .
有关详细信息,请参阅 You're Missing the Point of Promises。
最终成为变量不匹配。解决了不匹配问题后,上述承诺结构运行良好。