javascript - angularjs ui-route resolve 没有正常工作
本文介绍了javascript - angularjs ui-route resolve 没有正常工作的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
问 题
在angularjs ui-route 某个state中配置了一个resolve,要求登录后才能跳转
Login: ['LoginResolve',function(LoginResolve){return LoginResolve.Login;}]
这个LoginResolve
具体实现如下:
class LoginResolve {
login (LoginService, $q) {
if (LoginService.isLoggedIn() !== true) {
return LoginService.checkLoggedInStatus()
.catch(_error);
}
function _error () {
return $q.reject('requireLogin');
}
}
}
LoginResolve.prototype.login.$inject = ['LoginService', '$q'];
在 if (LoginService.isLoggedIn() !== true)
这个位置断点发现不会跳进来,不知道怎么回事。
我的app是这样:
angular.module('myapp',[uiRoute, common.name, loginRoute.name, personRoute.name])
common是这样:
export default angular.module('myapp.common',[])
.service('LoginService', LoginService)
.service('LoginResolve', LoginResolve)
.service('LoginTry', LoginTry)
不知道为什么在personRoute的config中的resolve使用ES6的LoginService无法工作,我用LoginTry改写一下:
function LoginResolve (LoginService, $q) {
if (LoginService.isLoggedIn() !== true) {
return LoginService.checkLoggedInStatus()
.catch(_error);
}
function _error () {
return $q.reject('requireLogin');
}
}
LoginResolve.$inject = ['LoginService', '$q'];
export default LoginResolve;
然后替换LoginService就可以好使一次,第二次就不会发送http请求了...
解决方案
把resolve中的{return LoginResolve.Login;}]
改成{LoginResolve.Login();}]
每次就会跳进if判断语句中去了,但是这时候又显示LoginService是undefined,估计这个service没有注入进来,明明已经inject了。哎,再查一查,有结果再放上来。
现在修改了一下,问题得到了解决:
正确的resolve应该这么写:
Login: ['LoginResolve', function(LoginResolve){return LoginResolve.login();}]
正确的LoginResolve
ES6的写法如下:
class LoginResolve {
constructor (LoginService, $q){
Object.assign(this, {LoginService, $q});
}
login () {
const self = this;
if (self.LoginService.isLoggedIn() !== true) {
return self.LoginService.checkLoggedInStatus()
.catch(_error);
}
function _error () {
return self.$q.reject('requireLogin');
}
}
}
LoginResolve.$inject = ['LoginService', '$q'];
当然你也可以采用function形式的LoginResolve
:
function LoginResolve (LoginService, $q) {
this.login = function(){
if (LoginService.isLoggedIn() !== true) {
return LoginService.checkLoggedInStatus()
.catch(_error);
}
function _error () {
return $q.reject('requireLogin');
}
}}
LoginResolve.$inject = ['LoginService', '$q'];
最开始不能通过LoginResolve.prototype.login.$inject = ['LoginService', '$q']
来注入LoginService
和$q
我再研究一下,谢谢评论。
这篇关于javascript - angularjs ui-route resolve 没有正常工作的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文