路由器不被守卫重定向

Question

我有一个带有 Angular 15 的 Angular 应用程序。当守卫返回 UrlTree 时，应用程序路由模块不知何故不会重定向。 应用程序路由.module.ts

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';

import { LoggedInGuard } from './guard/logged-in.guard';

import { HomeComponent } from './component/home-component/home.component';
import { LoginComponent } from './component/login-component/login.component';

const routes: Routes = [
  {
    path: '',
    redirectTo: 'home',
    pathMatch: 'full'
  },
  {
    path: 'home',
    component: HomeComponent,
    canActivate: [LoggedInGuard]
  },
  {
    path: 'login',
    component: LoginComponent
  }
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

LoggedInGuard 已定义并发送 POST 请求，然后获取响应，这是错误的，我通过控制台记录了它。 已登录.guard.ts

import { inject } from '@angular/core';
import { Router, UrlTree } from '@angular/router';

import { AuthService } from '../service/auth.service';

export const LoggedInGuard = () => {
    const authService = inject(AuthService);
    const router = inject(Router);

    authService.isLoggedIn().subscribe(isLoggedIn => {
        console.log(isLoggedIn);
        if (isLoggedIn) {
            return true;
        }
        return router.parseUrl('/login');
    });
};

控制台日志写错误，但我仍然被重定向到主路径并留在那里。控制台不写任何错误。我根据 Angular 文档做了这个，但没有找到任何东西。他们写道，守卫必须返回布尔值或 UrlTree...但它不会重定向。

Answer 1

我想你应该这样尝试

  if (isLoggedIn) {
        return true;
  }
  this.router.navigate(['login']);
  return false;

如果仍然不起作用，请告诉我。

Answer 2

首先你不应该订阅内卫。您可以返回 observable，它将自动订阅。

export const LoggedInGuard = () => {
    const authService = inject(AuthService);
    const router = inject(Router);

    return authService.isLoggedIn().pipe(switchMap((isLoggedIn: boolean) => isLoggedIn ? of(true): router.navigateByUrl('/login')));
};