Taobin-Recipe-Manager/client/src/app/app-routing.module.ts

import { NgModule, inject } from '@angular/core';
import { CanActivateFn, Router, RouterModule, Routes } from '@angular/router';
import { UserService } from './core/services/user.service';
import { Subject, finalize, lastValueFrom, map, takeUntil } from 'rxjs';

const authGuard: CanActivateFn = () => {
  const userService: UserService = inject(UserService);
  const router: Router = inject(Router);

  return userService.isAuthenticated.pipe(
    map((isAuth) => {
      if (isAuth) {
        return true;
      }
      return router.parseUrl('/login');
    })
  );
};

const loginGuard: CanActivateFn = () => {
  const userService: UserService = inject(UserService);
  const router: Router = inject(Router);

  return lastValueFrom(userService.getCurrentUser())
    .then(({ user }) => {
      if (user) {
        return router.parseUrl('/dashboard');
      }
      return true;
    })
    .catch(() => {
      return true;
    });
};

const routes: Routes = [
  {
    path: 'login',
    loadComponent: () =>
      import('./core/auth/auth.component').then((m) => m.AuthComponent),
    canActivate: [loginGuard],
  },
  {
    path: 'callback',
    loadComponent: () =>
      import('./core/callback/callback.component').then(
        (m) => m.CallbackComponent
      ),
  },
  {
    path: '',
    loadComponent: () =>
      import('./core/layout/layout.component').then((m) => m.LayoutComponent),
    children: [
      {
        path: '',
        pathMatch: 'full',
        redirectTo: 'dashboard',
      },
      {
        path: 'dashboard',
        loadComponent: () =>
          import('./features/dashboard/dashboard.component').then(
            (m) => m.DashboardComponent
          ),
        canActivate: [authGuard],
      },
    ],
  },
  {
    path: '**',
    pathMatch: 'full',
    redirectTo: 'dashboard',
  },
];

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