使用 firebase 身份验证和 angular 路由器进行路由

Question

我正在使用 ionic4 构建一个 ionic 应用程序。因此我使用 firestore 作为数据库。我还想使用 firebase 身份验证登录并注册到我的应用程序。问题如下：我的网站上有多个页面。有些页面供 public 访问，有些页面供私人访问。通过我实现的路由器防护，只有在我登录后才能看到私有的。我现在的问题是，有 public 个站点（如登录或注册）只有在我登录时才能访问我没有登录。

目前我的路由是这样工作的，我有一个“/”目录，所有私有内容都在“/private/”目录中。这个目录有自己的路由器守卫，只有登录后才能访问。我更愿意将所有内容都放在“/”目录中。对于这个问题，我想实现的是，如果用户在未登录的情况下尝试访问私人页面，或者如果他尝试访问 public 页面，那么我的路由器会将用户重定向到错误页面，如果他已登录。

路由器：

const routes: Routes = [
  { path: '', redirectTo: 'home', pathMatch: 'full' },
  { path: 'home', loadChildren: './pages/home/home.module#HomePageModule' },
  { path: 'login', loadChildren: 
  './pages/public/login/login.module#LoginPageModule' },
  { path: 'register', loadChildren: 
  './pages/public/register/register.module#RegisterPageModule' },
  {
  path: 'private',
  canActivate: [AuthGuardService],
  loadChildren: './pages/private/private-routing.module#PrivateRoutingModule'
  },
  // TODO: Create an awesome 404 Page :D
  { path: '**', redirectTo: 'home' },
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
  })
  export class AppRoutingModule {}

路由器卫士：

@Injectable({
providedIn: 'root'
})
export class AuthGuardService implements CanActivate {

  constructor(public auth: AuthenticationService, private router: Router) { 
  }

  canActivate(): boolean {
  const isAuthenticated = this.auth.isAuthenticated();
  if (!isAuthenticated) {
    this.router.navigate(['/login']);
  }
  return isAuthenticated;
  }
}

您可以在 GitHub 上找到我的代码：Code

我希望我的问题很清楚，我很高兴得到每一个答案:)

编辑：我没有得到任何结果，真的被卡住了！欢迎任何帮助！！

Answer 1

没有反应，自己想办法弄成这样：https://www.positronx.io/full-angular-7-firebase-authentication-system/

编辑：我决定制作多个 AuthenticationGuard。其中一个守卫用于私人页面，另一个用于仅 public 个页面。我还将我的登录用户保存到 localStorage，以便通过 synchronius 调用获取他。因此，我创建了一个名为 user 的接口，它的属性。其余的是一样的。我使用了 Angular 路由器 "like in the question" 并添加了 canActivate。

PS：在我应要求编辑它时不到一分钟就删除了我自己的评论的这个人的支持 xD

使用 firebase 身份验证和 angular 路由器进行路由

Routing with firebase authentication and angular router

javascript

firebase

ionic-framework

angular

ionic4