When I refresh the page in the system while logged in, the page always displays the login interface first and then switches back to the system page. During this period, the URL does not change.

package.json:

"dependencies": {
    "@angular/animations": "^18.2.0",
    "@angular/cdk": "^18.2.0",
    "@angular/common": "^18.2.0",
    "@angular/compiler": "^18.2.0",
    "@angular/core": "^18.2.0",
    "@angular/forms": "^18.2.0",
    "@angular/platform-browser": "^18.2.0",
    "@angular/platform-browser-dynamic": "^18.2.0",
    "@angular/platform-server": "^18.2.0",
    "@angular/router": "^18.2.0",
    "@angular/ssr": "^18.2.0",
    "@ant-design/icons-angular": "^18.0.0",
    "crypto-js": "^4.2.0",
    "express": "^4.19.2",
    "ng-zorro-antd": "^18.1.0",
    "rxjs": "~7.8.1",
    "tslib": "^2.6.3",
    "zone.js": "~0.14.10"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "^18.2.0",
    "@angular/cli": "^18.2.0",
    "@angular/compiler-cli": "^18.2.0",
    "@types/crypto-js": "^4.2.2",
    "@types/express": "^4.17.21",
    "@types/jasmine": "~5.1.4",
    "@types/lodash": "^4.17.7",
    "@types/node": "^22.3.0",
    "jasmine-core": "~5.2.0",
    "karma": "~6.4.4",
    "karma-chrome-launcher": "~3.2.0",
    "karma-coverage": "~2.2.1",
    "karma-jasmine": "~5.1.0",
    "karma-jasmine-html-reporter": "~2.1.0",
    "typescript": "~5.5.4"
  }

Route-Guard Code:

canActivate(
    route: ActivatedRouteSnapshot,
    state: RouterStateSnapshot
  ): boolean | Promise<boolean> {
    const secretKey = this.storageService.getSessionItem('secretKey');
    const encryptedUser = this.storageService.getItem('user');
    const encryptedMenus = this.storageService.getItem('menus');

    if (!secretKey || !encryptedUser || !encryptedMenus) {
      this.message.error('登录凭证过期，请重新登录。');

      setTimeout(() => {
        this.router.navigate(['/login']); // If I delete this code, the problem will not occur
      }, 0);

      return false;
    }

    ……
  }

  canActivateChild(
    route: ActivatedRouteSnapshot,
    state: RouterStateSnapshot
  ): boolean | Promise<boolean> {
    return this.canActivate(route, state);
  }

app.routes.ts

export const routes: Routes = [
  {
    path: '',
    // canActivateChild: [AuthGuard],
    children: [...loginRoutes],
  },
  {
    path: 'dashboards',
    canActivate: [AuthGuard],
    children: [...dashboardRoutes],
  },
  {
    path: 'planmanage',
    canActivateChild: [AuthGuard],
    children: [...planManageRoutes],
  },
  {
    path: '**',
    redirectTo: '/dashboards',
  },

app.component.html

<!-- System internal page -->
<ng-container *ngIf="!isLoginRoute">
    ……
        <div class="inner-content">
          <router-outlet></router-outlet>
        </div>
    ……
</ng-container>

<!-- login page -->
<router-outlet *ngIf="isLoginRoute"></router-outlet>

app.compnent.ts

constructor(
    private router: Router,
    private cdr: ChangeDetectorRef,
  ) {
    this.router.events.subscribe((event) => {
      if (event instanceof NavigationEnd) {
        this.isLoginRoute = this.router.url === '/login';
        this.cdr.detectChanges();
      }
    });
  }

What I want to achieve is that when a logged-in user is on the system’s internal page, the refresh is still within the system, instead of displaying the login interface and then switching back to the system.
I have tried to make routing decisions in app.component.ts, as well as in the login and dashboard pages, but none of them can prevent the problem from happening.