angular - 如何不以 Angular 显示登录用户的登录页面

Question

我有一个身份验证模块，路由身份验证模块包含以下路由:

const authRoutes: Routes = [
    {
        path: 'sign-in', component: SignInComponent
    }
];

仪表板路由模块包含以下路由:

const dashboardRoutes: Routes = [
  { path: 'home', component: HomeComponent, canActivate: [IsAuthenticatedGuard] }
];

应用程序(根)路由模块包含以下路由配置:

const appRoutes: Routes = [
  { path: '', redirectTo: 'home', pathMatch: 'full' },
  { path: '**', component: PageNotFoundComponent }
];

因此，当用户登录时，如果他转到根目录，他们会被重定向到主页，当未登录时，他们最终会出现在登录页面上，这是所需的行为。但是，当用户登录时，他们仍然可以转到登录页面，我认为，在这种情况下，将用户重定向到主页是有意义的，因为他们已登录并且不需要登录页面。

我无法在 IsAuthenticatedGuard 中执行此操作，因为如果我写类似以下内容:

@Injectable({
  providedIn: 'root'
})
export class IsAuthenticatedGuard implements CanActivate {
  private isSignedIn: boolean = true;

  constructor(
    private router: Router
  ) {}
  canActivate(
    next: ActivatedRouteSnapshot,
    state: RouterStateSnapshot): Observable<boolean | UrlTree> | Promise<boolean | UrlTree> | boolean | UrlTree {
    if (this.isSignedIn) {
      // this.router.navigate(['home']);
      return true;
    } else {
      this.router.navigate(['sign-in']);
      return false;
    }
  }
}

注意注释掉的行，它会陷入无限循环，这是非常明显的。实现这一目标的正确方法是什么？

编辑:

我现在能想到的解决方案是在登录组件中添加重定向逻辑，基本上是这样的:

  ngOnInit() {
    if (this.isSignedIn) {
      this.router.navigate(['home']);
    }
  }

Answer 1

您可以定义一个守卫并将其添加到您的 route ，如下所示:

@Injectable()
export class IsSignedInGuard implements CanActivate {
  // here you can inject your auth service to check that user is signed in or not
  constructor(private authService: AuthService,private router: Router) { }
  canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean {
    if (this.authService.isSignedIn()) {
      this.router.navigate(["/"]); // or home
      return false;
    }
    return true;
  }
}

然后在你的路由中:

const authRoutes: Routes = [
    {
        path: 'sign-in', component: SignInComponent , canActivate: [IsSignedInGuard]
    }
];

注意:您不需要 checkin ngOnInit 钩子(Hook)；