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.Navigating到/profile或/user-management的路径上，使用angular router.However运行良好，我面临以下问题如果我在/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

所以我终于找到了什么是wrong.In，仪表板组件(父组件)，这发生在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);
      });
  }

我删除了这一行，原因是在子视图呈现之后，父视图会说“嘿，子视图返回到父视图”( worked.The to the parent view )。

Answer 2

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