如果用户在使用 Angular 时登录 in/out，我如何在 <router-outlet> 中显示不同的数据？

Question

我正在构建一个使用会话 cookie 来跟踪用户是否登录的基本应用程序。

我想在用户注销时显示 "Sorry you can't see that" 组件，在用户登录时显示 "display the regular stuff" 组件。但是，只有一个标签，我无法弄清楚如何改变用户注销时出现的组件。

有没有办法做到这一点，还是我偏离了基地？

Answer 1

我建议您只使用一个路由器，并根据用户的身份验证更改该路由器指向的位置。

查看 angular 文档中的路由守卫部分：

https://angular.io/guide/router#milestone-5-route-guards

例如，您可以设置一个路由 "admin"，如果用户通过身份验证，它会受到保护并且只显示其子项。

const adminRoutes: Routes = [
  {
    path: 'admin',
    component: AdminComponent,
    canActivate: [AuthGuard],
    children: [
      {
        path: '',
        children: [
          { path: 'crises', component: ManageCrisesComponent },
          { path: 'heroes', component: ManageHeroesComponent },
          { path: '', component: AdminDashboardComponent }
        ],
      }
    ]
  }
];

非常重要的注意事项。 "real" 身份验证需要在您的后端进行。 angular 中的自动重新路由很有帮助，但由于应用程序在客户端运行，因此可以将其更改为显示服务器 returns 中的任何内容。

如果用户在使用 Angular 时登录 in/out，我如何在 <router-outlet> 中显示不同的数据？

How do I display different data in <router-outlet> if the user is logged in/out when using Angular?

router

angular