Получить значение, возвращаемое методом canActivate в Angular2 Route в компоненте?

Я создал Auth Manager в Angular2, чтобы напрямую ограничить доступ к компонентам. Я все еще новичок в 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]       
    }

person Community    schedule 04.01.2017    source источник
comment
я думаю, вам нужно вернуть не истину/ложь, а вместо этого значение   -  person federico scamuzzi    schedule 04.01.2017
comment
подписаться на событие, которое возвращает сообщение   -  person Roman C    schedule 04.01.2017
comment
Имеет @RomanC, не могли бы вы описать, как   -  person    schedule 04.01.2017
comment
Почему бы просто не перейти на специальную страницу NotAuthorised в случае сбоя, а не на /persons? например this.router.navigate(['/notAuthorized']); и создайте этот маршрут/компонент   -  person Quails4Eva    schedule 04.01.2017
comment
но это не будет хорошо в современных приложениях, люди получат сообщение о том, что их имя пользователя или пароль неверны.   -  person    schedule 05.01.2017
comment
@INFOSYS Компонент «notAuthorised» может сказать это сообщение. Я думаю, вы могли бы даже иметь параметр на маршруте, который позволяет вам передавать сообщение для отображения   -  person Quails4Eva    schedule 06.01.2017


Ответы (3)


Что я понял из вопроса, так это то, что вы хотите отобразить какое-то сообщение об ошибке пользователю, если аутентификация не удалась. @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.

Надеюсь, это то, на что вы смотрите. это не совсем ответ на вопрос, а способ решить вашу проблему.

person Rahul Singh    schedule 04.01.2017

Вы можете использовать службу и установить значение, которое вы хотите отображать в компоненте внутри AuthManager.

person Sudheer KB    schedule 04.01.2017
comment
Не могли бы вы уточнить - person ; 04.01.2017

Это довольно необычная вещь, но я понимаю, почему вы хотите что-то подобное. Однако невозможно зафиксировать результат, возвращенный из 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;
      }
   }

}
person Poul Kruijt    schedule 04.01.2017
comment
если вы скажете, что это необычно, как приложение отображает сообщение об ошибке, если пользователь не аутентифицирован. Например, нам нужно какое-то значение, чтобы проверить, что отображать сообщение об ошибке или маршрут к следующей странице - person ; 04.01.2017
comment
Да, но я не думаю, что это должно обрабатываться внутри AuthGuard. Охранник действительно существует только для того, чтобы сообщить маршрутизатору, может ли он перемещаться или нет. Но, тем не менее, я понимаю, почему вы хотите сделать что-то подобное, и я думаю, что мое решение удовлетворит ваши потребности;) - person Poul Kruijt; 04.01.2017
comment
как правильно на самом деле, не могли бы вы сообщить, что это было бы здорово - person ; 04.01.2017
comment
чем больше я об этом думаю, тем более интуитивно понятно, что с этим можно справиться внутри AuthGuard. Я пытаюсь придумать причины, чтобы выступить против этого, или другие способы сделать это, но ничего не могу придумать. Думаю, вы на правильном пути :) - person Poul Kruijt; 04.01.2017
comment
Есть ли более простой способ для этого - person ; 04.01.2017
comment
Единственная непростая вещь — это ToastComponent, и мне было немного скучно, когда я только что это написал :D. Однако вы можете подписаться на событие любым способом, которым хотите обработать ошибку. Как я уже говорил, невозможно напрямую взаимодействовать с возвращаемым значением из AuthGuard внутри компонента, что означает необходимость использования службы. - person Poul Kruijt; 04.01.2017