如何使用CanActivateFn限制已登录用户访问登录路由？

你需要调整现有守卫的逻辑，在用户已登录时阻止其访问登录路由并跳转到指定页面。以下是修改后的代码：

import { inject } from '@angular/core';
import { CanActivateFn, Router } from '@angular/router';
import { LoginService } from '../login-service/login-service.service';
import { catchError, map } from 'rxjs/operators';
import { of } from 'rxjs';

export const login_authGuard: CanActivateFn = (route, state) => {
  const login_service = inject(LoginService);
  const router = inject(Router);

  return login_service.authenticatedLogin().pipe(
    map(() => {
      // 用户已登录，阻止访问登录页并跳转到首页
      router.navigate(['/home']);
      return false;
    }),
    catchError(() => {
      // 用户未登录，允许访问登录页
      return of(true);
    })
  );
};

逻辑说明： #

• authenticatedLogin() 成功响应：说明用户处于登录状态，此时直接重定向到首页（或你指定的路由），并返回false阻止当前登录路由的访问。
• authenticatedLogin() 抛出错误：说明用户未登录，返回true允许访问登录路由。

路由配置注意： #

确保将这个守卫只应用在登录路由上，保护其他路由的守卫保持原有逻辑（未登录时跳登录页）。示例路由配置：

const routes: Routes = [
  { path: 'login', component: LoginComponent, canActivate: [login_authGuard] },
  { path: 'home', component: HomeComponent, canActivate: [authGuard] },
  // 其他受保护路由
];

内容的提问来源于stack exchange，提问作者Guilherme Peixe