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>

假设，当用户点击网址时，用户会被直接重定向到另一个网页。这就是我放<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);
          });
     }
}

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

我希望它有所帮助，如果您遇到任何进一步的问题，请告诉我。

Answer 2

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

例如

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

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

我认为这对你有帮助..欢呼......喜欢编码:)。

Answer 3

我喜欢使用带有ccess token的身份验证服务。我最喜欢的是auth0

这就是我的工作，

当用户登录时，将auth令牌设置为本地存储。这是使用auth0，但同样的原则适用。如果您不想使用auth0

，可以自己创建身份验证令牌

<强> auth.service.ts

 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将登录状态保存在一个变量中，并根据该变量隐藏/显示您的标题。一旦你点击退出按钮改变状态。

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

希望这对你有用。

关于angular2 route

4 个答案: