Javascript 重定向到身份验证路由的问题

我开始使用Angular，我试图创建一个简单的路由保护，如果我的服务未经授权返回，将用户重定向到登录页面

为此，我创建了此路由模式->

const routes: Routes = [
  {
    path: '',
    component: LoggedComponent,
    children: [
      {path: '', component: HomeComponent}
    ],
    canActivate: [RouteGuard]
  },
  {
    path: '',
    component: AuthComponent,
    children: [
      {path: '', redirectTo: '/login', pathMatch: 'full'},
      {path: 'login', component: LoginComponent},
      {path: 'signin', component: SigninComponent}
    ]
  },
];

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

这是我的警卫服务-> PS:Im将默认值设置为false

import {Subject, Observable} from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class RouteGuard implements CanActivate {

  authorized: Subject<boolean> = new Subject();

  canActivate(
    route: ActivatedRouteSnapshot,
    state: RouterStateSnapshot): boolean {
    this.setObservable(false)
    return false;

  }

  getObservable(): Observable<boolean> {
    console.log(`starts to observe`)
    return this.authorized.asObservable();
  }

  setObservable(newState: boolean) {
    console.log(`new observable state: ${newState}`)
    this.authorized.next(newState)
  }
  
}

---

但是，组件没有加载。似乎当canActivate参数返回false时，它不会转到AuthComponent，也不会加载任何内容。当authorized（canActivate）返回true时，它将正常运行。有没有人遇到过类似的问题，可以帮助我？

使用Firebase进行身份验证时，我就是这样做的：

export class GuardGuard implements CanActivate {

  constructor(private authService: AuthService, private router: Router){}

  async canActivate() {

    const user = await this.authService.isLogged();

    if(user){
      return true;
    }
    else {
      this.router.navigate(['login']);
      return false;
    }

  }

}

如果用户的登录路径返回true，那么它将加载请求的路由（如果没有），重定向到登录路径并返回false

这是路由：

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { LoginComponent } from './modules/login/pages/login/login.component';
import { SignupComponent } from './modules/login/pages/signup/signup.component';
import { HeroComponent } from './shared/components/hero/hero.component';
import { NotFoundComponent } from './shared/components/not-found/not-found.component';
import { GuardGuard } from './shared/guards/guard.guard';

const routes: Routes = [
  { path: 'home', component: HeroComponent },
  { path: '', redirectTo: 'home', pathMatch: 'full' },
  { path: 'signup', component: SignupComponent },
  { path: 'login', component: LoginComponent },
  { path: 'tasks', loadChildren: ()=> import('./modules/task/task.module').then(m => m.TaskModule), canActivate: [GuardGuard] },
  { path: 'profile', loadChildren: ()=> import('./modules/user/user.module').then(m => m.UserModule), canActivate: [GuardGuard] },
  { path: '**', component: NotFoundComponent }
];

---

很好，我的朋友，我会努力实现这一点。好吧，我发现你的代码和我的代码有点不同。您的代码guard位于应用程序（main/src/app）的同一级别。我的防护装置位于外部库（main/lib/shared）中。这就是为什么我使用rxjs来设置我的可观察对象，然后（AuthComponent）可以重定向到登录。但我的问题是，AuthComponent加载@Kiewlovsky我正在使用存储在shred模块中的守卫我已经在routes代码片段中添加了导入您是对的！通过路由器注入，我可以重定向到登录。谢谢！！！我希望我帮了忙！

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { LoginComponent } from './modules/login/pages/login/login.component';
import { SignupComponent } from './modules/login/pages/signup/signup.component';
import { HeroComponent } from './shared/components/hero/hero.component';
import { NotFoundComponent } from './shared/components/not-found/not-found.component';
import { GuardGuard } from './shared/guards/guard.guard';

const routes: Routes = [
  { path: 'home', component: HeroComponent },
  { path: '', redirectTo: 'home', pathMatch: 'full' },
  { path: 'signup', component: SignupComponent },
  { path: 'login', component: LoginComponent },
  { path: 'tasks', loadChildren: ()=> import('./modules/task/task.module').then(m => m.TaskModule), canActivate: [GuardGuard] },
  { path: 'profile', loadChildren: ()=> import('./modules/user/user.module').then(m => m.UserModule), canActivate: [GuardGuard] },
  { path: '**', component: NotFoundComponent }
];