Javascript 以Angular2登录/注册模式

我有注册和登录组件，可以通过/#/signup和/#/login访问。我正在尝试实现一个类似于Quora的“内容锁定”，在这里用户会被提示登录和注册

用户进入我的网站，可以“免费”访问许多路径，如#/home、#/contactus等。但是，当用户试图访问#/secret时，他们可以“访问”页面，但除非他们登录，否则他们无法与页面交互

登录组件（TS）：

登录HTML模板：

<div class="sign-container">
  <div class="sign-background"></div>
  <md-card class="sign-card">
    <md-card-title><img style="height: 64px;" src="assets/img/logo-full.svg"></md-card-title>
    <md-card-subtitle>Sign in to continue.</md-card-subtitle>
    <br>
    <md-card-content>
      <ng-container *ngIf="failureMessage">
        <div class="alert alert-danger" role="alert">
          <strong>Error:</strong>
          {{failureMessage }}
        </div>
      </ng-container>
      <form novalidate [formGroup]="form">
          [form inputs here]
      </form>
    </md-card-content>
    <md-card-actions>
      <button md-raised-button color="primary" (click)="login(form.value)"
      [disabled]="form.status === 'INVALID' || loading ">LOGIN</button>
    </md-card-actions>
    <br>
    <p>Don't have an account? <a routerLink="/signup" routerLinkActive="active">Sign Up</a></p>
  </md-card>

</div>

登录以继续。


错误：
{{failureMessage}}
[此处填写表格输入]
登录


你没有账户吗？（正在进行中）
你能创建一个plunker吗？@Aravind你能推荐你想要的plunkr吗？如果你创建一个工作原型，我们可以使用that@Aravind我在上面，给我一些来设置它“锁定”整个网站的原因是什么？那肯定会让人恼火吗？还是我没抓住重点D
<div class="sign-container">
  <div class="sign-background"></div>
  <md-card class="sign-card">
    <md-card-title><img style="height: 64px;" src="assets/img/logo-full.svg"></md-card-title>
    <md-card-subtitle>Sign in to continue.</md-card-subtitle>
    <br>
    <md-card-content>
      <ng-container *ngIf="failureMessage">
        <div class="alert alert-danger" role="alert">
          <strong>Error:</strong>
          {{failureMessage }}
        </div>
      </ng-container>
      <form novalidate [formGroup]="form">
          [form inputs here]
      </form>
    </md-card-content>
    <md-card-actions>
      <button md-raised-button color="primary" (click)="login(form.value)"
      [disabled]="form.status === 'INVALID' || loading ">LOGIN</button>
    </md-card-actions>
    <br>
    <p>Don't have an account? <a routerLink="/signup" routerLinkActive="active">Sign Up</a></p>
  </md-card>

</div>