Route Guards for Tanstack Router

[PointSingularity]

Thanks for the great library, I really love what this router brings to the table (typesafety 👀)!

One thing that I would like to see is something akin to Guards in Angular/Vue.

Angular provides some nice out-of-the-box structures for route guards.
Custom guards are easy to make.

@NgModule({
  imports: [
    RouterModule.forRoot([
      {
        path: 'team/:id',
        component: TeamComponent,
        canActivate: [CanActivateRoute] 
      }
    ])
  ],
  providers: [CanActivateRoute]
})
class AppModule {}

Some of the standouts are:

• CanActivate - which doesn't allow for loading an element based on some conditions (great for permissions), and won't load/trigger any elements or API calls for that route
• CanDeactivate - can the route be navigated from, great for an agnostic way to show a confirmation dialog for all elements with a modifed unsaved form
  ...

Vue also provides some nice features:

• router.beforeEach - applies to every route before load
• router.afterEach - applies to every route after load
  ...

The syntax is also pretty intuitive:

const router = createRouter({ ... })

router.beforeEach((to, from) => {
  // ...
  // explicitly return false to cancel the navigation
  return false
})

Loaders can achieve a lot of these (maybe with some potential issues), but IMO it would be great to have.

[tannerlinsley]

The routing middle ware I’m doing soon will probably solve this Tanner Linsley

…

On Nov 10, 2022 at 3:31 PM -0700, PointSingularity ***@***.***>, wrote: Thanks for the great library, I really love what this router brings to the table (typesafety 👀)! One thing that I would like to see is something akin to Guards in Angular/Vue. Angular provides some nice out-of-the-box structures for route guards. Custom guards are easy to make. @NgModule({ imports: [ RouterModule.forRoot([ { path: 'team/:id', component: TeamComponent, canActivate: [CanActivateRoute] // this is basically any condition that returns a boolean } ]) ], providers: [CanActivateRoute] }) class AppModule {} Some of the standouts are: • CanActivate - which doesn't allow for loading an element based on some conditions (great for permissions), and won't load/trigger any elements or API calls for that route • CanDeactivate - can the route be navigated from, great for an agnostic way to show a confirmation dialog for all elements with a modifed unsaved form ... Vue also provides some nice features: • router.beforeEach - applies to every route before load • router.afterEach - applies to every route after load ... The syntax is also pretty intuitive: const router = createRouter({ ... }) router.beforeEach((to, from) => { // ... // explicitly return false to cancel the navigation return false }) Loaders can achieve a lot of these (maybe with some potential issues), but IMO it would be great to have. — Reply to this email directly, view it on GitHub, or unsubscribe. You are receiving this because you are subscribed to this thread.Message ID: ***@***.***>

[PointSingularity]

That is great to hear, thanks!

[starxyn]

Hi @tannerlinsley , can I check is the route guard implemented?