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

问题描述

我正在构建angular2应用，目前我有一个主页组件，其中包含导航栏，工具栏和router-out的主要内容. 我想为登录机制添加一个额外的页面，因此，如果用户未通过身份验证，则登录页面将显示在整个屏幕中，并且在登录到用户后，将导航到具有上述结构的组件.

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:

其路由的LoginComponent是'/login'. 路由的HomeComponent是". (空路线).

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

此外，我为HomeComponent设置了一个防护措施，该措施检查用户的canActivate是否已通过身份验证.如果否，则将用户导航到"/登录"路径.

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.

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

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屋！