使用 Firebase 身份验证和角度路由器进行路由答案

【问题标题】：Routing with firebase authentication and angular router使用 Firebase 身份验证和角度路由器进行路由
【发布时间】：2019-02-06 14:40:10
【问题描述】：

我正在使用 ionic4 构建一个离子应用程序。因此我使用firestore作为数据库。我还想使用 firebase-authentication 登录并注册到我的应用程序。问题如下：我的网站上有多个页面。有些页面是供公众访问的，有些是供私人访问的。有了路由器保护，我实现了私有站点只有在我登录时才可见。我现在的问题是，有公共站点（如登录或注册）只有在我未登录时才能访问.

目前我的路由是这样工作的，我有一个“/”目录，所有私有内容都在“/private/”目录中。这个目录有一个自己的路由器保护，只有登录后才能访问。我希望一切都位于“/”目录中。对于我想要解决的这个问题，如果用户尝试在未登录的情况下访问私有页面，或者如果他尝试访问公共页面（如果他登录后应该无法访问），我的路由器会将用户重定向到错误页面。

路由器：

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

RouterGuard：

@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

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

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

【问题讨论】：

"寻求调试帮助的问题（“为什么这段代码不起作用？”）必须包括所需的行为、特定问题或错误以及在问题本身中重现它所需的最短代码。没有明确的问题陈述对其他读者没有用处。见：How to create a Minimal, Complete, and Verifiable example."
感谢您的回答。我的代码正在运行，但不如预期。我在上面描述了它是如何工作的以及我希望它如何工作。复制所需的最短代码将遵循我很抱歉。

标签： javascript angular firebase ionic-framework ionic4

【解决方案1】：

没有回应，所以我自己想通了，弄成这样：https://www.positronx.io/full-angular-7-firebase-authentication-system/

编辑：我决定制作多个 AuthenticationGuard。其中一个防护用于私人页面，另一个仅用于公共页面。我还将我的登录用户保存到 localStorage，以便通过同步呼叫让他获得。因此，我使用它的属性创建了一个名为 user 的界面。其余的都是一样的。我使用 Angular 路由器“就像在问题中一样”并添加了 canActivate。

PS：感谢这个人在我根据请求编辑它不到一分钟后就删除了我自己的评论的解决方案 xD

【讨论】：