1

Component アクセスを直接制限するために、Angular2 で Auth Manager を作成しました。私はまだAngularに慣れていないため、概念を学習しています。

ユーザー名が正しくない場合、ユーザーを制限できました。しかし、コンポーネントの canActivate メソッドによって返された値を使用して、フロント エンドにメッセージを表示することができません。

私のAuthManagerクラス

import { Injectable } from '@angular/core';
import { CanActivate,Router,ActivatedRouteSnapshot,RouterStateSnapshot } from '@angular/router';

@Injectable()

export class AuthManager implements CanActivate{

    user = "user";

    constructor(private router:Router){

    }

    canActivate(route:ActivatedRouteSnapshot,state:RouterStateSnapshot){
        console.log("Comes Here");
            if(this.user == "user"){
                return true;
            }else{
                console.log("YOur are not authorized");
                this.router.navigate(['/persons']);
                return false;
            }
    }
}

あなたはログで許可されていませんが、コンポーネントで値を使用する方法を確認できます。

私の app.router.ts

{
    path: 'persons/:id',
    component: PersonDetailComponent,
    canActivate:[AuthManager]       
    }
4

3 に答える 3

1

それは非常に珍しいことですが、あなたがそのようなことを望む理由は理解しています. ただし、 から返された結果を取得することはできませんCanActivate。

ただしErrorService、コンポーネントを作成し、トリガーされたイベントにサブスクライブして、トースト メッセージなどを表示することができます。

テストされていないコード

@Injectable()
export class AuthManager implements CanActivate{

    user = "user";

    constructor(private router:Router, private errorService: ErrorService){}

    canActivate(route:ActivatedRouteSnapshot,state:RouterStateSnapshot){
       if(this.user == "user"){
            return true;
       } else{
           this.errorService.toastError("You are not authorized");
           this.router.navigate(['/persons']);
           return false;
       }
    }
}

エラー サービスは基本的に次のようになります。このサービスをルート プロバイダーに追加する必要があります。

export class ErrorService {

   public readonly error: Subject<string> = new Subject<string>(); 

   public toastError(error: string): void {
     this.error.next(error);
   }

}

その後、コンポーネントをAppComponent（または適切と思われるもの）内に配置し、次のようにします。

@Component({
   selector : 'error-toast',
   template : `<div [innerHtml]="error" *ngIf="error"></div>`
})
export class ErrorToastComponent implements OnInit, OnDestroy { 

   public error: string = "";  

   private timeout: number = 0;

   private errorSub: Subscription;

   private readonly timer: number = 5000;

   constructor(private errorService: ErrorService) {}

   ngOnInit(): void {
      this.errorSub = this.errorService.subscribe((error: string) => {
          this.toastError(error);
      });
   }

   ngOnDestroy(): void {
      this.errorSub.unsubscribe();
      this.cancelTimer();
   }

   private toastError(error): void {
      this.cancelTimer();
      this.error = error;
      this.timeout = window.setTimeout(() => {
         this.error = "";
      }, this.timer);
   }

   private cancelTimer(): void {
      if(this.timeout !== 0) {
         clearTimeout(this.timeout);
         this.timeout = 0;
      }
   }

}
于 2017-01-04T12:25:46.367 に答える
1

サービスを使用して、AuthManager 内のコンポーネントに表示する値を設定できます。

于 2017-01-04T12:20:52.350 に答える