Question

我正在尝试从Firestore获取数据。运行正常。现在，我想检查用户是否已登录，如果不是，则应使用authstatechanged

将其导航到登录页面并为此Im。

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

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

代码是这样的。

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

数据应显示在内部版本中，但直到我打开控制台后才显示

我读到某处的原因是由于subscribe子句中的导航调用。但是我不知道如何解决该问题，或者如果用户未登录，该如何导航。

Answer 1

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

您可以在此处看到一个示例，它是一个较大的教程的一部分：

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

概念是Angular提供了称为Guards（official docs example）的东西。

您使用控制台生成类似以下内容的

：

ionic generate guard guards/auth

然后您将获得一个如下代码段：

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;
  }
}

您可能会猜到，在此处插入auth检查并返回true或false可以保护网址/路由。

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

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

首次尝试时未显示数据

1 个答案: