类'AuthGaurd'错误地实现了接口CanActivate

Question

I am beginner and learning Angular From tutorials as i follow those tutorials and when i implement interface CanAcivate as he did in tutorial its show error

Class 'AuthGaurd' incorrectly implements interface 'CanActivate'. Property 'canActivate' is missing in type 'AuthGaurd' but required in type 'CanActivate'.ts(2420)

Here is implementation of 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;
    });
  }
}`

And here is 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';

I change Import from import { CanActivate } from '@angular/router/src/utils/preactivation'; to import { CanActivate } from '@angular/router; But not work import { CanActivate } from '@angular/router; But not work

Also I add following in canActivate as i watch one answer on StackOverflow but it also not work for me

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

Answer 1

注意canActivate函数的camel情况，并使用必要的参数来实现该函数。

Answer 2

your method should be canActivate() and it should return Observable<boolean> | boolean 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;
    });
    }

Answer 3

You should return a boolean from the canActivate method. There's a spelling mistake in your method. it should be canActivate instead of CanActivate . CanActivate is a interface name where as canActivate is the method name

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;
    });


  }
}