Angular 页面刷新时路由重定向到父路由而不是子路由

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 上。使用 angular router.However 导航到 /profile 或 /user-management 工作正常我面临以下问题如果我在路线 /dashboard/user-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;
    }
  }
}

每当我刷新页面时，都会调用 auth guard 并打印

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()

上发生的 wrong.In 仪表板组件（父组件）

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);
      });
  }

我删除了这一行，它 worked.The 原因是在呈现子视图后父视图会说 "Hey child view go back to the parent view"

Angular 页面刷新时路由重定向到父路由而不是子路由

Angular routing redirects to parent route instead of child on page refresh

angular

angular-router