第一次尝试时未显示数据答案

【问题标题】：Data not being displayed on first attempt第一次尝试时未显示数据
【发布时间】：2019-12-13 04:12:18
【问题描述】：

我正在尝试从 Firestore 获取数据。它工作正常。现在我想检查用户是否登录，如果他没有登录，那么他应该导航到登录页面，为此我使用 authstatechanged

问题是现在数据没有显示在页面上，当我打开 chrome 控制台时，数据出现了

我尝试在 authstatechanged 订阅块之外调用函数

代码是这样的。

constructor(private navCtrl: NavController, private router: Router, private user: UserService) {
    firebase.auth().onAuthStateChanged(user => {
      if (!user) {
        router.navigateByUrl('/login'); 
      }
      this.getPosts();
    });
}

数据应该在构建时显示，但直到我打开控制台才会显示

我在某处读到这是因为 subscribe 子句中的导航调用。但我不知道如何解决它或如果用户没有登录如何导航。

【问题讨论】：

请移动你的 auth().subscribe 到 ngOnInit
试过了。不工作。在我点击 ctrl + shift + i 后数据仍然出现，而不是在应用程序启动时出现
你有用户的任何控制台输出吗？你能显示你的 html 和组件的其余部分吗？

标签： angular firebase google-cloud-firestore ionic4

【解决方案1】：

如果您想阻止未经授权的用户访问页面，您应该使用 Auth Guard。

你可以在这里看到一个例子，这是一个更大的教程的一部分：

https://fireship.io/lessons/angularfire-google-oauth/

这个概念是 Angular 提供了称为 Guards (official docs example) 的东西。

你使用控制台生成一个类似的：

ionic generate guard guards/auth

然后你得到一个像这样的sn-p：

import { Injectable } from '@angular/core';
import { CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot } from '@angular/router';

@Injectable({
  providedIn: 'root',
})
export class AuthGuard implements CanActivate {
  canActivate(
    next: ActivatedRouteSnapshot,
    state: RouterStateSnapshot): boolean {
    console.log('AuthGuard#canActivate called');
    return true;
  }
}

您可以猜到，在那里插入您的身份验证检查并返回 true 或 false 可以保护 url/路由。

要将此AuthGuard 应用到实际页面，您可以在app-routing.module.ts 文件中执行类似的操作：

  { 
    path: 'somepage', 
    loadChildren: './pages/somepage/somepage.module#SomePageModule',
    canActivate: [AuthGuard]
  },

【讨论】：