Ошибка с типом возвращаемых данных TS2322

Question

Использую canActivate в сервисе AuthGuard , где я в методе canActivate обращаюсь this.authService.isAuthenticated() что возвращает мне Promise. Потом использую метод .then где и выделяется у меня все ошибкой:

Error: src/app/auth.guard.ts:27:9 error TS2322: Type 'Promise<boolean | Observable | undefined>' is not assignable to type 'boolean | Observable | Promise'

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

@Injectable({ 
    providedIn: 'root' 
})
export class AuthGuard implements CanActivate {

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

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

код Authservice.isAuthenticated()

 isAuthenticated(): Promise<boolean> {
        return new Promise((resolve) => {
            setTimeout(() => {
                resolve(this.isAuth)
                    , 1000
            })
        })
    }

скрин

Answer 1

Проблема, естественно, здесь:

this.authService.isAuthenticated().then(isAuth => {
  if (isAuth) {
    return true
  } else {
    this.router.navigate(['/'], {
      queryParams: {
        auth: false
      }
    })
  }
})

Ошибка так и сообщает, что возвращаемый тип не соответствует объявленному, то есть:

Тип, который вы возвращаете (тут идет перечисление их возможных значений) 'Promise<boolean | Observable<boolean> | undefined>' не соответствует объявленному (тоже перечисление) 'boolean | Observable<boolean> | Promise<boolean>'.

В частности undefined нет среди объявленных возвращаемых типов данных (а вы его возвращаете неявно), поэтому надо что-то вернуть в конце среди перечисленного. Думаю, что вот это

return this.router.navigate(['/'], {
  queryParams: {
    auth: false
  }
})

Тогда метод можно переписать так:

this.authService.isAuthenticated().then(isAuth => {
  if (isAuth) {
    return true;
  }

  return this.router.navigate(['/'], {
    queryParams: {
      auth: false
    }
  });
});

БЛОГ НА HUSL

Ошибка с типом возвращаемых данных TS2322

Ответы (1 шт):