Angular登录后ResolveFn未完成时旧路由仍显示，求标准解决方案

我有一个Angular主应用组件，包含两个router-outlet，分别用于登录前和登录后场景：

<div *ngIf="user">
  <router-outlet></router-outlet>
</div>
<div *ngIf="!user">
  <router-outlet></router-outlet>
</div>

原本功能正常，但登录后的页面配置了resolver，路由需等待数据解析完成才会激活。现在遇到的问题是：登录成功后，直到resolveFn完全解析完成、下一个路由激活前，网站仍持续显示登录页面。从截图可见，用户已成功登录（左侧菜单已出现），但因resolver仍在获取数据（网络标签中有待处理请求），下一个路由尚未激活，此时仍显示之前的/login页面。

我想知道是否有办法限制登录后的router-outlet不再显示LoginComponent？或者是否有标准的处理方案？我想到一个临时方案：将LoginComponent的所有代码放到<div *ngIf="!user"></div>中，这样用户登录后即使命中登录路由也不会显示内容，但这看起来只是权宜之计，有没有更好的实现方式？

1. 用路由守卫拦截已登录用户访问/login路由 #

最直接的方式是给/login路由添加反向鉴权守卫，从根源上避免已登录用户看到登录页面。

实现步骤： #

• 创建一个PreventLoggedInAccessGuard守卫：

import { Injectable } from '@angular/core';
import { CanActivate, Router } from '@angular/router';
import { AuthService } from './auth.service'; // 假设用户状态由AuthService管理

@Injectable({ providedIn: 'root' })
export class PreventLoggedInAccessGuard implements CanActivate {
  constructor(private authService: AuthService, private router: Router) {}

  canActivate(): boolean {
    if (this.authService.user) {
      // 用户已登录，直接重定向到登录后的首页（比如/dashboard）
      this.router.navigate(['/dashboard']);
      return false;
    }
    return true;
  }
}

• 在路由配置中给/login路由绑定该守卫：

const routes: Routes = [
  {
    path: 'login',
    component: LoginComponent,
    canActivate: [PreventLoggedInAccessGuard]
  },
  {
    path: 'dashboard',
    component: DashboardComponent,
    resolve: { data: DashboardResolver }, // 你的数据解析器
    canActivate: [AuthGuard] // 常规登录鉴权守卫
  },
  // 其他路由配置...
];

这样用户登录后，无论是主动访问/login还是路由切换的残留状态，都会被直接重定向到首页，不会停留在登录页面。

2. 优化路由结构，使用单router-outlet+布局切换 #

双router-outlet的设计容易导致路由状态混乱，建议改用单router-outlet配合布局组件切换的方式：

主组件模板修改： #

<!-- 根据用户状态切换布局，共用一个router-outlet -->
<app-authenticated-layout *ngIf="user">
  <router-outlet></router-outlet>
</app-authenticated-layout>

<app-unauthenticated-layout *ngIf="!user">
  <router-outlet></router-outlet>
</app-unauthenticated-layout>

其中app-authenticated-layout包含左侧菜单等登录后的布局元素，app-unauthenticated-layout对应登录前的极简布局。

路由配置优化： #

给所有登录后的路由添加AuthGuard（确保未登录用户无法访问），给登录前的路由（如/login）添加PreventLoggedInAccessGuard（确保已登录用户无法访问），让路由状态更清晰，避免出现已登录后加载登录组件的情况。

3. 在Resolver期间显示加载状态 #

如果Resolver处理时间较长，用户会看到旧页面或空白，此时可以在主组件中监听路由解析状态，显示加载提示：

实现思路： #

• 在主组件中维护isLoading状态，通过监听路由事件更新状态：

import { Router, NavigationStart, NavigationEnd } from '@angular/router';

isLoading = false;

constructor(private router: Router) {
  this.router.events.subscribe(event => {
    if (event instanceof NavigationStart) {
      this.isLoading = true;
    } else if (event instanceof NavigationEnd) {
      this.isLoading = false;
    }
  });
}

• 修改主组件模板，在加载期间显示提示：

<div *ngIf="user">
  <div *ngIf="isLoading" class="loading-overlay">
    <!-- 加载动画或提示文本 -->
    数据加载中，请稍候...
  </div>
  <router-outlet *ngIf="!isLoading"></router-outlet>
</div>
<div *ngIf="!user">
  <router-outlet></router-outlet>
</div>

这样在Resolver处理期间，已登录用户会看到加载提示，而非残留的登录页面。

内容的提问来源于stack exchange，提问作者Pawan Nogariya