角路由重定向到父路由，而不是頁面刷新中的子路由

Question

我有以下應用程序路由：

const routes: Routes = [
  {
    path: '',
    canActivate: [AuthGuard],
    children:
      [
        {
          path: '',
          redirectTo: '/dashboard',
          pathMatch: 'full'
        },
        {
          path: 'dashboard',
          component: DashboardComponent,
          children:
            [
              {path: 'profile', component: ProfileComponent},
              {path: 'user-management', component: UserManagementComponent},
              {path: 'role-management', component: RoleManagementComponent}
            ]
        }
      ]
  },
  {path: 'login', component: LoginComponent},
  {path:'token-verify',component:TwoFactorVerificationComponent}
];

所以這是我的問題。假設我在路線dashboard使用角路由器導航到/profile或/user-management效果很好，但是如果我在路線/dashboard/user-management或/dashboard/role-management上則遇到以下問題/dashboard/role-management並刷新頁面，我將重定向到/dashboard/profile 。 有什么想法我做錯了嗎？

這是我的身份驗證

import { Injectable } from "@angular/core";
import {
  CanActivate,
  ActivatedRouteSnapshot,
  RouterStateSnapshot
} from "@angular/router";
import { Observable } from "rxjs";
import { UserService } from "../services/user.service";
import { TokenService } from "../services/token.service";

@Injectable({
  providedIn: "root"
})
export class AuthGuard implements CanActivate {
  constructor(
    private tokenService: TokenService,
    private userService: UserService
  ) {}

  canActivate(
    next: ActivatedRouteSnapshot,
    state: RouterStateSnapshot
  ): Observable<boolean> | Promise<boolean> | boolean {
    console.log(`Requested -> state: ${state.url}`);
    if (this.tokenService.isLoggedIn()) {
      console.log("isLogged in and will return true");
      return true;
    } else {
      console.log("will fail and go to login");
      this.userService.redirectToLogginPage();
      return false;
    }
  }
}

每當我刷新頁面時，就會調用身份驗證保護並打印

Requested -> state: /dashboard/user-management 
auth.guard.ts:26 isLogged in and will return true

萬一我登錄

經過一番挖掘后，我發現如果刷新dashboard/user-management上的頁面，則實際上會調用該組件的OnInit方法，但會在/dashboard/profile重定向

Answer 1

   const routes: Routes = [
  {
    path: '',
    canActivate: [AuthGuard],
    children:
      [
        {
          path: '',
          redirectTo: '/dashboard',
          pathMatch: 'full'
        },
        {
          path: 'dashboard',
          component: DashboardComponent,
 children: [
                  {path: '', redirectTo: 'profile'},
                  {path: 'profile', component: ProfileComponent},
                  {path: 'user-management', component: 
                UserManagementComponent},
                  {path: 'role-management', component: 
                   RoleManagementComponent}
              ]     
   }
      ]
  },
  {path: 'login', component: LoginComponent},
  {path:'token-verify',component:TwoFactorVerificationComponent}
];

Answer 2

所以我終於找到了問題所在。在儀表板組件（父組件）中，這發生在ngOnInit（）上

ngOnInit() {
    // @TODO
    // refactor using async await
    this.userService
      .getProfile()
      .then((res: any) => {
        console.log(res);
        const user: UserIdentity = res;
        this.user_email = user.emailId;
        if (this.userService.checkrole(user.roles, "ADMIN")) {
          //this.router.navigate(['/dashboard']);
        }
      })
      .catch(error => {
        console.error(error);
      });
  }

我刪除了這一行，它起作用了。原因是在渲染子視圖之后，父視圖會顯示“嘿，子視圖返回到父視圖”。