Класс 'AuthGaurd' неправильно реализует интерфейс CanActivate - PullRequest
Новая
       24

Класс 'AuthGaurd' неправильно реализует интерфейс CanActivate

0 голосов
/ 27 февраля 2019

Я начинающий и изучаю Angular Из учебников, как я следую этим учебникам и когда я реализую интерфейс CanAcivate, как он делал в учебнике, его ошибка показа

Class 'AuthGaurdнеправильно реализует интерфейс «CanActivate».Свойство 'canActivate' отсутствует в типе 'AuthGaurd', но требуется в типе 'CanActivate'.ts (2420)

Вот реализация Canactivate 

export class AuthGaurd implements CanActivate
{
  constructor(private auth: AuthService, private router: Router) { }
  CanActivate(){
    return this.auth.user$.map(user => {
      if (user) return true;
      this.router.navigate(['/login']);
      return false;
    });
  }
}`

А вот Imports

 import { Injectable } from '@angular/core';
    import { AuthService } from './auth.service';
    import { CanActivate } from '@angular/router/src/utils/preactivation';
    import { Router } from '@angular/router';
    import 'rxjs/add/operator/map';

Я изменяю Импорт с import { CanActivate } from '@angular/router/src/utils/preactivation'; на import { CanActivate } from '@angular/router; But not work

Также я добавляю следующее в canActivate, так как смотрю один ответ на StackOverflow, но он также не работает для меня 

 CanActivate(next: ActivatedRouteSnapshot,
 state: ActivatedRouteSnapshot): Observable<boolean>

Ответы [ 3 ]

0 голосов
/ 27 февраля 2019

Обратите внимание на случай верблюда функции canActivate и используйте необходимые параметры для реализации функции.

0 голосов
/ 27 февраля 2019

ваш метод должен быть canActivate () и должен возвращать Observable<boolean> | boolean: 

import {ActivatedRouteSnapshot, CanActivate, Router, RouterStateSnapshot} from "@angular/router";

canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<boolean> | boolean {
      this.auth.user$.map(user => {
          if (user) return true;
      this.router.navigate(['/login']);
      return false;
    });
    }
0 голосов
/ 27 февраля 2019

Вы должны вернуть логическое значение из метода canActivate.В вашем методе есть орфографическая ошибка.оно должно быть canActivate вместо CanActivate.CanActivate - это имя интерфейса, где canActivate - это имя метода 

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

export class AuthGaurd implements CanActivate
{
  constructor(private auth: AuthService, private router: Router) { }
  canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot){

    this.auth.user$.map(user => {
      if (user) return true ;
      this.router.navigate(['/login']);
      return false;
    });


  }
}
...