[英]Get the value returned by canActivate Method in Angular2 Route in a component?
我已經在Angular2中創建了一個身份驗證管理器來直接限制組件訪問。 我仍然對接觸和學習概念仍然陌生。
如果用戶名不正確,我可以限制用戶。 但是我無法使用組件中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;
}
}
}
我能夠看到YOur在日志中未被授權,但是如何在組件中使用該值。
我的app.router.ts
{
path: 'persons/:id',
component: PersonDetailComponent,
canActivate:[AuthManager]
}
我對問題的理解是,如果身份驗證失敗,您想向用戶顯示某種錯誤消息。 @PierreDuc是正確的。但是我有不同的方法。
您可以做的是創建一個服務類
authenticate.service.ts
import {Injectable} from '@angular/core'
@Injectable()
export class AuthenticateService
isAuthenticated(//take the user credentials here):boolean{
return true // if the credentials are correct
or retun false // if the credentials donot match.
}
在您的組件和AuthManager中使用此類
import { Injectable } from '@angular/core';
import { CanActivate,Router,ActivatedRouteSnapshot,RouterStateSnapshot } from '@angular/router';
import {AuthenticateService} from './authenticate.service'
@Injectable()
export class AuthManager implements CanActivate{
user = "user";
constructor(private router:Router,private authenticateService:AuthenticateService){
}
canActivate(route:ActivatedRouteSnapshot,state:RouterStateSnapshot){
console.log("Comes Here");
return this.authenticateService.isAuthenticated();
}
}
並在組件中檢查相同
this.authenticateService.isAuthenticated()== false
*ngIf and then display an error message to the user.
希望這是您要查看的內容。 它不完全是問題的答案,而是解決問題的一種方法。
您可以使用service並設置要在AuthManager內部組件中顯示的值。
那是一件很平常的事,但是我知道你為什么想要這樣的事情。 但是,無法捕獲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;
}
}
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.