angular - Masalah mengakhiri pernyataan return pada canActivate

Saya mengalami masalah saat menggunakan metode CanActivate: muncul kesalahan ts2366 "Fungsi tidak memiliki pernyataan return akhir dan tipe return tidak termasuk undefined".

Mengikuti kode saya:

import { ActivatedRouteSnapshot, CanActivate, Router, RouterStateSnapshot, UrlTree } from '@angular/router';
import { Observable } from 'rxjs';
import { AuthService } from './auth.service';
import { Injectable } from '@angular/core';

@Injectable()
export class AuthGuard implements CanActivate {

  constructor(private authService: AuthService,
              private router: Router) { }

  canActivate(
    route: ActivatedRouteSnapshot,
    state: RouterStateSnapshot): Observable<boolean> | Promise<boolean> | boolean {
    if (this.authService.isAuth) {
      return true;
    } else {
      this.router.navigate(['/auth']);
    }
  }
}

Saya mencoba menambahkan '| undefined' setelah boolean tetapi kesalahan lain memberi tahu saya bahwa itu tidak kompatibel dengan CanActivate.

Apakah kamu punya ide untuk menyelesaikannya?

Terima kasih sebelumnya atas bantuan Anda.

Jawaban #1

Anda seharusnya mengembalikan boolean atau UrlTree dari canActivate. Jika Anda mengembalikan UrlTree, maka itu akan menangani navigasi untuk Anda, jadi Anda tidak perlu memanggil this.router.navigate sendiri (lihat https://angular.io/api/router/CanActivate)

Kode Anda mungkin terlihat seperti ini:

import { ActivatedRouteSnapshot, CanActivate, Router, RouterStateSnapshot, UrlTree } from '@angular/router';
import { Observable } from 'rxjs';
import { AuthService } from './auth.service';
import { Injectable } from '@angular/core';

@Injectable()
export class AuthGuard implements CanActivate {

  constructor(private authService: AuthService,
              private router: Router) { }

  canActivate(
    route: ActivatedRouteSnapshot,
    state: RouterStateSnapshot): Observable<boolean> | Promise<boolean> | boolean {
    if (this.authService.isAuth) {
      return true;
    } else {
      return this.router.parseUrl('/auth');
    }
  }
}