Angular AuthGuard 可以激活

Question

AuthGuard 阻止它应该阻止的一切。但是当我 return 为真时，发生了一件不愉快的事情。我在控制台中得到一个“测试”，但它没有让我进入 /test，而是将我重定向到 /。为什么？它是 app.module.ts 中的 RouterModule:

    RouterModule.forRoot([
      { path: 'test', component: HomeComponent, canActivate: [AuthGuard] },
      { path: 'account/register', component: RegisterComponent }
], { relativeLinkResolution: 'legacy' })

这是 AuthGuard：

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

@Injectable()
export class AuthGuard implements CanActivate {

  constructor(private _authService: AuthService, private _cookieService: CookieService, private router: Router) { }

  canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<boolean | UrlTree> | Promise<boolean | UrlTree> | boolean | UrlTree {
    const tokenExists: boolean = this._cookieService.check("token");
    if (tokenExists == true) {
      const token = this._cookieService.get("token");
      this._authService.isAuthenticated(token).subscribe(data => {
        if (data as any == true) {
          console.log("test");
          return true;
        }
        else if (data as any == false) {
          this.router.navigate(['account/register']);
          return false;
        }
        else {
          this.router.navigate(['account/register']);
          return false;
        }
      });
    }
    else {
      this.router.navigate(['account/register']);
      return false;
    }
  }
}

为什么会这样？

Answer 1

您应该return 订阅范围。重构为

 canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<boolean | UrlTree> | Promise<boolean | UrlTree> | boolean | UrlTree {
    const tokenExists: boolean = this._cookieService.check("token");
    if (tokenExists == true) {
      const token = this._cookieService.get("token");
      return this._authService.isAuthenticated(token).subscribe(data => {
        if (data as any == true) {
          console.log("test");
          return true;
        }
        else if (data as any == false) {
          this.router.navigate(['account/register']);
          return false;
        }
        else {
          this.router.navigate(['account/register']);
          return false;
        }
      });
    }
    else {
      this.router.navigate(['account/register']);
      return false;
    }
  }

Angular AuthGuard 可以激活

Angular AuthGuard canActivate

angular

authentication

auth-guard