Question

我有一个组件，我已经订阅了一个observable来从Firebase提取数据。相关的订阅代码类似于：

[注意：更新/更正了以下代码。]

// in my component
ngOnInit() {
  // this.af is an injected AngularFire2 instance
  this.tasks = this.af.database.list('/tasks')
    .subscribe(tasks => this.tasks = tasks);
}

必须对用户进行身份验证才能查看此组件，并且我有一个确保这一点的路由保护。

然而，当我退出时，我收到此错误：

客户无权访问所需数据

我注销了类似的内容：

// this.auth is an injected FirebaseAuth instance
this.auth.logout();
this.router.navigate(['/login']);

在调用路由器navigate方法之前发生错误。问题是我有一个活动任务观察者订阅，其中一个开放的Web套接字连接在调用logout方法后立即出错，因为用户不再经过身份验证。

任务订阅和注销功能位于我的应用程序的不同部分。如果他们在同一个地方，我想我可以在我退出时调用订阅上的unsubscribe方法。但即便如此，在我的logout方法中坚持使用此订阅取消逻辑似乎很麻烦。我不太清楚如何处理这件事。

如何在注销时取消对任务观察者的订阅？

在Alexander Leonov关于重复作业的评论之后更新了代码

亚历山大指出我两次分配给this.tasks财产。好点子！这段代码不正确。我没有将订阅分配给一个房产。代码应该是这样的：

ngOnInit() {
  // this.af is an injected AngularFire2 instance
  this.af.database.list('/tasks')
    .subscribe(tasks => this.tasks = tasks);
}

感谢你指出这一点，Alexander。

解决方案：我最终做了什么

我能够通过Alexander Leonov关于在我的组件中取消订阅ngOnDestroy的评论来解决这个问题。

在我的任务组件中使用他的代码：

ngOnInit() {
  this.subscription = this.af.database.list('/tasks')
    .subscribe(tasks => this.tasks = tasks);
}

ngOnDestroy() {
  this.subscription.unsubscribe();
}

解决方案的另一部分涉及在我的顶级组件AppComponent中订阅AngularFire auth observable。如果经过身份验证，则会重定向到一条路由;如果没有，它会重定向到另一条路线：

this.authService.auth$.subscribe((currentUser) => {
  if (currentUser) {
    this.router.navigate(['/tasks']);
  } else {
    this.router.navigate(['/login']);
  }
});

注销时，将通知此订阅，并将用户重定向到登录路由。这一系列事件最终触发了我的组件上的ngOnDestroy方法，该方法取消了AngularFire可观察任务的记录。

Answer 1

你搞砸了一下。您使用

this.tasks = this.af.database.list(...)

来保留订阅：

subscribe(tasks => this.tasks = tasks)

以后作为任务存储：

// in my component
ngOnInit() {
  this.subscription = this.af.database.list('/tasks')
    .subscribe(tasks => this.tasks = tasks);
}

ngOnDestroy() {
    this.subscription.unsubscribe();
}

你需要选择力量的一面。：）

要回答您的问题，您需要了解有关应用程序如何运作的更多信息。如果你在用户登录时在ngOnInit（）中初始化连接，那么我的猜测就是在注销时你的组件被杀死了，所以你也可以实现OnDestroy并在那里杀掉订阅，如下所示：

{{1}}

与订阅的可观察

在Alexander Leonov关于重复作业的评论之后更新了代码

解决方案：我最终做了什么

1 个答案: