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

Question

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

访问该站点时,App.component被引导.App.component的模板具有所有组件标记(例如menu.component,search.component和router-outlet).

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

Answer 1

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

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

有关*ngIf的更多详细信息,请访问:

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

恩.

@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
    }
}