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

Question

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

App.component 在访问站点时被引导。 App.component 的模板包含所有组件标签（例如 menu.component、search.component 和路由器插座）。

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

Answer 1

我的做法是使用 *ngIf 指令 "hide" 这些元素，直到用户通过身份验证。我在上面的单词 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
    }
}

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

Good template strategy for authentication in Angular 2

angular

angular2-routing

angular2-template