我使用Ionic 2或3事件将数据从我的登录页面传递给我的一个提供者,该提供者在我的页面之间共享。用户登录后,我想将令牌发送到我的提供者文件并锁定所有路由。本质上,我想写这样的代码:
if (token) {allow access to routes} else {no access}
doLogin() {
// this.navCtrl.setRoot('MenuPage')
let headers = new Headers();
headers.append('Content-Type', 'application/json');
this.http.post(this.apiUrl + 'login', JSON.stringify(this.user), {headers:headers})
.map(res => res.json())
.subscribe(data => {
this.events.publish('token:added', data.token)
if(data.login === 'yes') {
this.token = data.token;
this.navCtrl.setRoot('MenuPage')
}
else {
alert('Bad login cridentials');
}
})
}
提供商
ionViewDidLoad() {
console.log("are we here?")
this.events.subscribe('token:added', (data) => {
console.log('>>>>>>>>>>>>>>>>> token added is ', data)
})
}
有趣的是,从技术上讲,我的提供者从未加载到屏幕上,所以我不确定我是否应该使用ionViewDidLoad。但是,为了测试ionViewDidLoad是否有问题,我在菜单页面中导入了上面的函数,但我仍然无法访问令牌:添加的数据。我可以看到我记录的"我们在这里吗?"字符串,但仅此而已。
我正在取回令牌,用户正在登录。我只想使用服务器发送到前端的令牌对用户进行身份验证。
有没有其他方法可以通过推送方法将数据从我的登录功能传递给我的提供商,因为我的提供商不会登录到屏幕上?
试试这个:
doLogin() {
// this.navCtrl.setRoot('MenuPage')
var self = this;
let headers = new Headers();
headers.append('Content-Type', 'application/json');
this.http.post(this.apiUrl + 'login', JSON.stringify(this.user), {headers:headers})
.map(res => res.json())
.subscribe(data => {
self.events.publish('token:added', data.token)
if(data.login === 'yes') {
self.token = data.token;
self.navCtrl.setRoot('MenuPage')
}
else {
alert('Bad login cridentials');
}
})
}
在subscribe
中,您的作用域已更改,因此无法使用this
引用外部作用域。一种方法是将您的作用域存储到一个变量中,并将该变量用作全局作用域。
您也可以尝试在subscribe
中打印作用域以获得更好的理解。
console.log(self);
console.log(this);
让我知道这是否有效!
提供程序将不会发生ionViewDidLoad事件。因此,事件的订阅应该在提供程序类的ngOnInit()回调函数中完成,其余代码看起来不错。还要确保在发布登录事件之前初始化了提供程序。在菜单页中,不会记录事件数据,因为您在加载菜单页之前发布事件。这就是为什么不执行添加到事件订阅中的日志的原因。