有关angular2路线的问题

Question

这是角度路由器的官方示例。 https://angular.io/docs/ts/latest/guide/router.html#!#browser-url-styles https://angular.io/resources/live-examples/router/ts/plnkr.html

如果我有这样的要求：用户未登录时，他看不到顶部栏（图片第二行的菜单列表应隐藏），只有登录后，顶部栏才可见，我想很多关于此，但找不到解决方案。我不知道如何使用canActive挂钩来控制它，任何人都有一个主意，请告诉我，谢谢。

import { Component } from '@angular/core';

@Component({
selector: 'my-app',
template: `
<h1 class="title">Angular Router</h1>
<nav>
  <a routerLink="/crisis-center" routerLinkActive="active">Crisis Center</a>
  <a routerLink="/heroes" routerLinkActive="active">Heroes</a>
  <a routerLink="/admin" routerLinkActive="active">Admin</a>
  <a routerLink="/login" routerLinkActive="active">Login</a>
</nav>
<router-outlet></router-outlet>
`
})
export class AppComponent {
} 

让我更清楚我的问题。当用户加载具有这种结构的页面时，我应该从哪里或从其他地方获取并记录登录状态以实现我的目标？

Answer 1

假设您的app.component.html中包含以下代码

<navigation-bar></navigation-bar>
<router-outlet></router-outlet>

假设，当用户点击该URL时，该用户将直接重定向到另一个页面。 这就是为什么我放<router-outlet> 。 例如，当用户转到url时，如果用户未登录，则可以将其重定向到登录组件。 然后，按照正式的正式文档中所述创建共享服务。

//component-communicator.service.ts
export class ComponentCommunicatorService{
     private _showNavBar: Subject<booelan> = new Subject<boolean>;
     public showNavBar$ = this._showNavBar.asObservable();

     public showNavBar(value: boolean){
          this._showNavBar.next(value);
     }
}

您可以从app.module到其他组件提供此服务。

//app.module.ts
...
@NgModule({
     ...
     providers: [
          ...
          ComponentCommunicatorService,
          ...
     ]
})
export class AppModule{}

在navigation-bar.component.ts中，您将拥有带有以下代码的showNavBar字段：

//navigation-bar.component.ts
export class NavigationBarComponent {
     public showNavBar: boolean = false;
     constructor(private componentCommunicatorService: ComponentCommunicatorService, ...){
          this.componentCommunicatorService.showNavBar$.subscribe((value: booelan) => {
               this.showNavBar = value;
          });
     }
}

您在这里的工作正在订阅showNavBar$字段。 通过提供这一点，无论何时在应用程序的任何位置更新showNavBar$的值， NavigationBarComponent类中的订阅者都自行处理这种情况：

//navigation-bar.component.html
<nav *ngIf="showNavBar">
     ...
</nav>

例如，在login.component中，您可以显示这样的导航栏；

//login.component.ts
export class LoginComponent {
     constructor(private componentCommunicatorService: ComponentCommunicatorService, ...){
          ...
     }

     onLoginSubmit(/*params*/){
          yourService.login(/*params*/).subscribe((response) => {
               //do whatever you want
               this.componentCommunicatorService.showNavBar(true);
          });
     }
}

在应用程序开始时，由于NavigationBarComponent类中的showNavBar的值为false，因此用户将无法看到导航栏。 通过使用自己的控件检查用户是否登录，可以更新showNavBar$字段。

希望对您有所帮助，如有其他问题，请告诉我。

Answer 2

您可以使用变量（布尔值）来保持用户的状态（用户是否登录）。 然后，您可以使用它*ngIf隐藏该栏。

例如

<div *ngIf = "loggedIn">
<-- this includes the bar you want to hidden-->
</div>

您可以在用户登录时在.ts文件中为其设置loggedIn值。最初将其保留为false。

我认为这对您会有所帮助。

Answer 3

我喜欢将身份验证服务与ccess token 。 我最喜欢的是auth0

我就是这样

当用户登录时，将auth令牌设置为本地存储。这使用auth0，但应用相同的原理。 如果您不想使用auth0则可以自己创建auth令牌

验证服务

 constructor(private router: Router, private http: Http ) {
    this.userProfile = JSON.parse(localStorage.getItem('profile'));
    this.lock.on('authenticated', (authResult: any) => {
      localStorage.setItem('access_token', authResult.idToken);
      this.lock.getProfile(authResult.idToken, (error: any, profile: any) => {
        if (error) {
          console.log(error);
          return;
        }

public authenticated(): boolean {
    try {
        var jwtHelper: JwtHelper = new JwtHelper();
        var token = this.accessToken;
        if (jwtHelper.isTokenExpired(token))
            return false;
        return true;
    }
    catch (err) {
        return false;
    }
  }

现在localstorage中有一个令牌

我在component.html执行此操作

 <span *ngIf="auth.authenticated() && auth.userProfile" class="profile-name">{{auth.userProfile.nickname}}</span>
            <span *ngIf="!auth.authenticated() && !auth.userProfile" class="profile-name">Account</span>

Answer 4

有多种方法可以做到这一点。 您可以使用localstorage，在登录后将登录状态保存在一个变量中，并基于该变量隐藏/显示标题。 并且，一旦您单击注销按钮，便会更改状态。

如果我理解错了，请告诉我。

希望这对您有用。