Angular 2 中用于身份验证的良好模板策略

我目前有一个 Angular 2 应用程序正在运行，如下所示：

App.component 在访问站点时被引导。 App.component 的模板具有所有组件标签（例如 menu.component、search.component 和 router-outlet）。

我基本上需要的是：当前访问者被直接重定向到登录页面，因为用户需要登录。他仍然能够看到菜单以及仅适用于登录用户的所有组件。添加额外模板层以便未登录的用户被重定向的最佳策略是什么？

我这样做的方法是使用 *ngIf 指令“隐藏”这些元素，直到用户通过身份验证。我在上面的 hide 这个词周围使用了引号，因为 Angular 实际上并没有隐藏模板的那部分，它实际上根本不渲染它，所以它不在 DOM 中。

这意味着除非用户登录，否则只会呈现您的登录屏幕。

有关 *ngIf 的更多详细信息可以在这里找到：

https://angular.io/docs/ts/latest/guide/structural-directives.html#!#ngIf https://angular.io/docs/ts/latest/guide/structural-directives.html#!#ngIf

ex.

@Component({
    selector: 'your-selector',
    template: `
        <div *ngIf='isLoggedIn() === true'>
            <menu-component></menu-component>
            <search-component></search-component>
            <router-outlet></router-outlet>
        </div>
        <div *ngIf='isLoggedIn() !== true'>
            <login-component></login-component>
        </div>
    `
    ...
})
export class YourSelectorComponent {
    isLoggedIn() {
        //check if logged in
    }
}