Angular CanActivate导致节流历史记录状态错误

每当我导航到

/about

页面时，我的应用程序就会在一个无限循环中结束，错误是

限制历史状态的更改，以防止浏览器挂起

每当我导航到
/
页面时，我的应用程序不会导航到
仪表板
，它只会显示一个空白页面

如果找到令牌，我希望我的页面导航到
/dashboard
，如果找不到令牌，则导航到
/home
或
/

此外，如果找到令牌，我希望下面链接的其余页面不可访问（仪表板除外）

我怎样才能解决这个问题

app.routing.component.ts

const routes: Routes = [
  { path: 'about', component: AboutComponent, canActivate: [AuthGuard] },
  { path: 'home', component: HomeComponent },
  { path: 'dashboard', component: DashboardComponent, canActivate: [AuthGuard] },
  { path: 'careers', component: CareersComponent },
  { path: 'contact', component: ContactComponent },
  { path: 'legal', component: LegalComponent },
  { path: 'login', component: LoginComponent },
  { path: 'press', component: PressComponent },
  { path: 'markets', component: MarketsComponent },
  { path: 'markets/:symbol', component: PriceComponent },
  { path: 'register', component: RegisterComponent },
  { path: 'status', component: StatusComponent },
  { path: 'services', component: ServicesComponent },
  { path: 'support', component: SupportComponent },
  { path: 'support/account-management', component: AccountManagementComponent },
  { path: 'support/transactions', component: TransactionsComponent },
  { path: 'support/payment-methods', component: PaymentMethodsComponent },
  { path: 'support/security', component: SecurityComponent },
  { path: 'support/task-administration', component: TaskAdministrationComponent },
  { path: 'support/wallet-services', component: WalletServicesComponent },
  { path: '**', redirectTo: '', pathMatch: 'full' },
  { path: '', component: HomeComponent },
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule],
})
export class AppRoutingModule implements OnInit {
  constructor() { }

  ngOnInit() {
    RouterModule.forRoot(routes, { scrollPositionRestoration: 'enabled' });
  }
}

@Injectable()
export class AuthGuard implements CanActivate {
  constructor(private authService: AuthService,
    private router: Router) {
  }

  canActivate(
    _next: ActivatedRouteSnapshot,
    _state: RouterStateSnapshot): Observable<boolean> | Promise<boolean> | boolean {
    if (this.authService.isLoggedIn()) {
      this.router.navigate(['dashboard']);
      if (environment.production === false) {
        console.log('Token found, redirecting to dashboard');
      }
      return true;
    } else {
      this.router.navigate(['home']);
      if (environment.production === false) {
        console.log('Token not found, redirecting to home');
      }
      return false;
    }
  }
}

@Injectable()
export class AuthService {
  constructor(private myRoute: Router) { }

  getToken() {
    return localStorage.getItem('token');
  }

  isLoggedIn() {
    return this.getToken() !== null;
  }

  logout() {
    localStorage.removeItem('token');
    this.myRoute.navigate(['login']);
  }
}

auth.guard.ts

const routes: Routes = [
  { path: 'about', component: AboutComponent, canActivate: [AuthGuard] },
  { path: 'home', component: HomeComponent },
  { path: 'dashboard', component: DashboardComponent, canActivate: [AuthGuard] },
  { path: 'careers', component: CareersComponent },
  { path: 'contact', component: ContactComponent },
  { path: 'legal', component: LegalComponent },
  { path: 'login', component: LoginComponent },
  { path: 'press', component: PressComponent },
  { path: 'markets', component: MarketsComponent },
  { path: 'markets/:symbol', component: PriceComponent },
  { path: 'register', component: RegisterComponent },
  { path: 'status', component: StatusComponent },
  { path: 'services', component: ServicesComponent },
  { path: 'support', component: SupportComponent },
  { path: 'support/account-management', component: AccountManagementComponent },
  { path: 'support/transactions', component: TransactionsComponent },
  { path: 'support/payment-methods', component: PaymentMethodsComponent },
  { path: 'support/security', component: SecurityComponent },
  { path: 'support/task-administration', component: TaskAdministrationComponent },
  { path: 'support/wallet-services', component: WalletServicesComponent },
  { path: '**', redirectTo: '', pathMatch: 'full' },
  { path: '', component: HomeComponent },
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule],
})
export class AppRoutingModule implements OnInit {
  constructor() { }

  ngOnInit() {
    RouterModule.forRoot(routes, { scrollPositionRestoration: 'enabled' });
  }
}

@Injectable()
export class AuthGuard implements CanActivate {
  constructor(private authService: AuthService,
    private router: Router) {
  }

  canActivate(
    _next: ActivatedRouteSnapshot,
    _state: RouterStateSnapshot): Observable<boolean> | Promise<boolean> | boolean {
    if (this.authService.isLoggedIn()) {
      this.router.navigate(['dashboard']);
      if (environment.production === false) {
        console.log('Token found, redirecting to dashboard');
      }
      return true;
    } else {
      this.router.navigate(['home']);
      if (environment.production === false) {
        console.log('Token not found, redirecting to home');
      }
      return false;
    }
  }
}

@Injectable()
export class AuthService {
  constructor(private myRoute: Router) { }

  getToken() {
    return localStorage.getItem('token');
  }

  isLoggedIn() {
    return this.getToken() !== null;
  }

  logout() {
    localStorage.removeItem('token');
    this.myRoute.navigate(['login']);
  }
}

首先，我认为您需要将通配符放在最后：

  { path: '', component: HomeComponent },
  { path: '**', redirectTo: '', pathMatch: 'full' }

第二，如果您希望页面不可访问地依赖于令牌，那么应该在这些页面上添加一个保护

第三，您已经将
/
映射到
主页组件
，这样就永远不会重定向到
仪表板组件

第四，我相信无限循环是因为您的
AuthGuard
重定向到
/dashboard
。该路径由
AuthGuard
保护，它重定向到
/dashboard
等。您不应该重定向到由执行重定向的同一个保护保护保护的路径

我认为你应该做的是把你的守卫分成两部分：


如果有令牌，一个用于
/home
重定向到仪表板的防护装置。如果没有令牌，此防护不应重定向到主路径，因为这已经是当前路径
如果没有令牌，则为
/dashboard
和其他路径提供一个防护，以重定向到主路径。如果有令牌，此防护不应重定向到仪表板
仅当路线与您当前的路线不相等时才导航到该路线，抱歉，我不明白。这是怎么回事？