Angular 2 根据用户是否登录路由到特定组件

Question

我创建了一个简单的应用程序，允许用户使用注册凭据登录。

我想让用户稍微直观一些，以便在单击"用户"菜单时，他们根据当前是否登录导航到特定组件。

登录用户 -> 允许注销的组件

已注销用户 -> 允许登录的组件

<小时 />

到目前为止，我有以下内容;

import { Component, OnInit } from "@angular/core";
import { AuthService } from "./auth/auth.service";
@Component({
    selector: 'app-header',
    template: `
        <header class="row">
            <nav class="col-md-8 col-md-offset-2">
                <ul class="nav nav-pills nav-justified">
                    <li routerLinkActive="active"><a [routerLink]="['/authors']">Authors</a></li>
                    <li *ngIf="isLoggedIn" routerLinkActive="active"><a [routerLink]="['/user/logout']">User</a></li>
                    <li *ngIf="!isLoggedIn" routerLinkActive="active"><a [routerLink]="['/user']">User</a></li>
                </ul>
            </nav>
        </header>
    `
})
export class HeaderComponent implements OnInit {
    constructor(private authService: AuthService){}
    isLoggedIn: boolean

    ngOnInit() {
        this.isLoggedIn = this.authService.isSignedIn();
    }
}

但是，它似乎只能刷新页面，因为由我的服务填充的值是 LoggedIn，尚未更新。

任何关于如何使用带有 Angular2 的 MEAN 堆栈最好地实现这一目标的建议，将不胜感激。

Answer 1

将检查放在构造函数中

constructor(private router : Router, 
            private authService: AuthService){
   if(!this.authService.isSignedIn()){ // not of negative case
      this.router.navigateByUrl('/signin') //path
   }
}

Answer 2

通过更改逻辑解决。而不是在用户单击链接时尝试重新路由。它现在在加载组件后路由

    ngOnInit() {
    if(this.authService.isSignedIn()){
        this.router.navigateByUrl('/user/logout');
    }}