Angular2 - 具有登录结构的路由器插座 [英] Angular2 - router-outlet with login structure

问题描述

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

I'm building angular2 app and currently I have an home component with navbar, toolbar and router-outlet for the main content. I want to add one extra page for the login mechanism, so if the user is not authenticated the login page will be displayed in the entire screen and after login to user will be navigated to the component with the structure above.

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

How can I manage this structure? Do I need two router outlets? the first one for the navigation between login and home pages and one for the main content in the home page? Any other common structure which is more simple than two router outlets?

推荐答案

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

I succeed achieving this workflow by implementing this structure. I have two main components:

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

LoginComponent which it's route is '/login'. HomeComponent which it's route is ''. (empty route).

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

In addition I set a guard for my HomeComponent which checks if the user is authenticated in his canActivate. If no I navigates the user to the '/login' route.

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

Then in my home component I have template with the following structure: tool-bar, side-menu, and router-outlet.

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

The last thing I have to do is to configure other app routes as children routes of my HomeComponent. (for example: '/news' is a child route of '').

这篇关于Angular2 - 具有登录结构的路由器插座的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！