Angular项目二次登录后无法从登录页导航至首页问题求助

大家好，我最近碰到了一个Angular路由导航的诡异问题，想请各位大佬帮忙看看：

默认情况下，用户未登录时会自动跳转到登录页面。第一次登录时onLogin方法完全正常，能顺利跳转到首页；点击登出按钮后也能正确回到登录页。但如果不刷新页面，再次尝试登录时，点击登录按钮后页面就卡在登录页，完全没法导航到首页，也没有任何报错提示。

下面是我项目里的相关代码片段：

路由配置（app.route.ts） #

export const routes: Routes = [
  { path: '', redirectTo: 'home', pathMatch: 'full', },
  { path: 'login', component: LoginComponent, },
  { path: 'home', component: HomeComponent, canActivate: [authGuard], }
];

路由守卫（authGuard） #

export const authGuard: CanActivateFn = (route, state) => {
  const router = inject(Router);
  const isLoggedIn = !!localStorage.getItem('loggedIn');
  if (isLoggedIn) return true;
  else {
    router.navigate(['/login']);
    return false;
  }
};

登录组件（login.component.ts） #

onLogin() {
  const { user, password } = this.loginForm.value;
  if (user.trim() === 'admin' && password.trim() === 'admin') {
    localStorage.setItem('loggedIn', 'true');
    this.router.navigate(['/home']);
  } else {
    alert(`Incorrect Username or password. Please try again.`);
  }
}

首页组件（home.component.ts） #

onLogout() {
  localStorage.removeItem('loggedIn');
  this.router.navigate(['/login']);
}

有没有朋友遇到过类似的情况？麻烦帮忙分析下问题出在哪，或者给个解决思路，万分感谢！

内容来源于stack exchange