Angular2 - 具有登录结构的路由器导出

Question

我正在构建 angular2 应用程序，目前我有一个主页组件，其中包含用于主要内容的导航栏、工具栏和路由器 socket 。 我想为登录机制添加一个额外的页面，这样如果用户未通过身份验证，登录页面将显示在整个屏幕中，并且在用户登录后将导航到具有上述结构的组件。

我如何管理这个结构？我需要两个路由器 socket 吗？第一个用于登录和主页之间的导航，一个用于主页中的主要内容？ 还有比两个路由器 socket 更简单的常见结构吗？

Answer 1

我通过实现这个结构成功地实现了这个工作流程。 我有两个主要组成部分:

LoginComponent 它的路由是'/login'。 它的路由是''的HomeComponent。 (空路线)。

此外，我为我的 HomeComponent 设置了一个守卫，它检查用户是否在他的 canActivate 中通过了身份验证。如果不是，我会将用户导航到“/login”路径。

然后在我的主页组件中，我有具有以下结构的模板: 工具栏、侧面菜单和路由器 socket 。

我要做的最后一件事是将其他应用程序路由配置为我的 HomeComponent 的子路由。 (例如:'/news' 是 '' 的子路由)。