Angular how to disable authGuard on particular child page

Question

can anyone suggest best way to disable authguard (applied on parent level) on a single child page.

ROUTES:Routes = [
    {
        path: '',
        component: AdminComponent,
        children: [
            {
                path: '',
                pathMatch: 'full',
                data: { title: 'Home' },
                loadChildren: 'src/app/admin/dashboard/modules/dashboardRouteModule#DashboardRouteModule',
            },
            {
                path: 'dashboard',
                redirectTo: ''
            },
            {
            path : 'blog',
            data: { title: 'Blog', breadcrumb: 'Blog' },
            loadChildren: 'src/app/admin/blog/modules/blogRouteModule#BlogRouteModule'
            },
             {
                path: '**',
                component: NotFoundComponent
            }],
    canActivate: [ AuthGuard ]}];

Blog Route Module

ROUTES:Routes = [
    {
        path: '',
        component: BlogComponent,
        resolve: {
            routeValues: BlogCreateResolve
        },
    },
    {
        path: ':id',
        resolve: {
            routeValues: BlogEditResolve
        },
        runGuardsAndResolvers: 'always',
        children: [
            {
                path: '',
                component: BlogEditComponent,
                canDeactivate: [CanDeactivateGuard],
            },
            {
                path: 'list',
                data: { title: 'BlogList', breadcrumb: 'List' },
                component: BlogListComponent,
                resolve: {
                    list: BlogListResolve
                }
            }]}]

Currently, all pages are restricted and require a login but I want to disable authguard for 'list' route so that page can be viewed without login.

Thanks

One way i figured out and i implemented before is disabling the guard in parent and set it on each children. — Hoch, Aug 12 '21 at 12:50
That would quite difficult as there are quite a lot modules and routes. — Bhavesh, Aug 13 '21 at 10:26

score 1 · Answer 1 · answered Aug 12 '21 at 13:43

1

Maybe you can add a condition in your guard that allows navigation when the url matches the one that you have in the component you want to remove.

answered Aug 12 '21 at 13:43

Johan Nieto

41
4

have gone down that path but I just feel its not good way to do it. I would be good if there a clean way of doing it something similar to Allowannonymous in C#. – Bhavesh Aug 13 '21 at 10:28

Elazar Zadiki · Accepted Answer · 2022-05-04T14:12:44.767

You can pass data to your guard on each route, and in that way to exclude certain routes from it. for example:

  {
    path: 'home',
    component: HomeComponent,
    canActivate: [AuthGuard],
    data: [{ noLogin: true}],
  },

and in the guard:

canActivate(
    route: ActivatedRouteSnapshot,
    state: RouterStateSnapshot
  ):
    | Observable<boolean | UrlTree>
    | Promise<boolean | UrlTree>
    | boolean
    | UrlTree {
    const noLogin= route.data[0].noLogin;
   
    if (noLogin) {
       return true;
    }
     
  }

Angular how to disable authGuard on particular child page

2 Answers2