Angular 5 / 6. 我在哪里放置我的登录页面？

Posted 2023-03-13

【中文标题】Angular 5 / 6. 我在哪里放置我的登录页面？

【英文标题】：Angular 5 / 6. Where do i place my login page?

【发布时间】：2019-01-09 22:48:14

【问题描述】：

我想做一个有角度的网站。我想在我的应用中有这样的第一页：

https://getbootstrap.com/docs/4.1/examples/sign-in/

当您在那里登录时，您将能够看到您的仪表板，类似于下一个，您无法在没有登录的情况下查看仪表板页面，因此登录是网站的第一页：

https://getbootstrap.com/docs/4.1/examples/jumbotron/

我不知道在哪里放置登录页面，想到的选项（不知道它们是否好）：

为登录页面创建一个专用组件，并使用 app-component 上的 rouet-outlet 路由到它。我不喜欢这个选项，因为它让我在其他组件中包含页眉和页脚。

创建了一个专用组件，将其包含在 app-component 和 *ngIf 上（如果用户未登录）。我不喜欢这个选项，但我不知道为什么，安全？

我知道有一个（或多个）更好的选择，希望您能帮助我学习。

index.html 怎么样，无论如何我都应该编辑它吗？

谢谢

【问题讨论】：

这在很大程度上取决于您的项目和您的个人喜好。

如果你想要我的意见，你应该做一个登录组件和一个记录组件。记录的组件将只包含一个<router-outlet>，它的路由将包含canActivate、canActivateChild、children，这样所有其他路由都受到保护，只有在用户登录时才会显示。

我建议你阅读这个：medium.com/@ryanchenkie_40935/…

参考这个SO question。最好的方法是创建一个单独的登录和布局组件，然后在布局组件的路由定义中添加 canAcitvate 保护。

@trichetriche 我是否将两个组件都放在 app.component 上或登录时重定向到已登录？

【参考方案1】：

你可以做的基本上是两个组件，一个用于登录，一个用于仪表板。

一旦您在登录中进行身份验证，例如通过 JWT，您可以将令牌存储到 localstorage，然后在需要用户进行身份验证的组件上添加 Route Guards。

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