sensitive-blue

Role base URL protection

Hi I'm new on tanstack/router and i'm just wondering is there any way to close access of some URL depending on User role on File-Based-Routing for example: normal user role can not access the url of /dashboard

15 Replies

helpful-purple•15mo ago

You could check their user role in the beforeLoad callback and throw a redirect if they don't meet the criteria.

helpful-purple•15mo ago

Essentially, you'll be adapting the authenticated routes to work for RBAC. https://tanstack.com/router/latest/docs/framework/react/guide/authenticated-routes#authentication-using-react-contexthooks

Authenticated Routes | TanStack Router React Docs

Authentication is an extremely common requirement for web applications. In this guide, we'll walk through how to use TanStack Router to build protected routes, and how to redirect users to login if they try to access them. The route.beforeLoad Option

sensitive-blueOP•15mo ago

is it posible to make this action with Navigation Blocking or not

helpful-purple•15mo ago

You could I guess, but you'd be implementing pretty much on each view that goes to the destination page. Its alot of repetitive work that can easily let bugs slip in. Stopping at the before load callback would be better.

sensitive-blueOP•15mo ago

hmmm there's only one thing that makes me think about use protected route solution, some of my route can access more than one user role also 10 user roles on my project and they can be divided into separate roles. that means so much code duplication of course i can use layout pattern but I'm afraid things getting more complicated this time because some of the route can accesible for 3 or 4 user role

helpful-purple•15mo ago

So do whitelisting.

if (!['role-a', 'role-b', 'role-c'].include(user.role)) {
  throw redirect({ ... })
}

if (!['role-a', 'role-b', 'role-c'].include(user.role)) {
  throw redirect({ ... })
}

It'll always be easier to define this logic in the Route configuration than having to manually setup navigation blocking in all of your routes. Plus, navigation blocking wouldn't work if the user chose to directly head to that URL without doing UI navigations. Or inverse that code-snippet to do blacklisting ofc.

if (['not-allowed'].includes(user.role)){
  throw redirect({ ... })
}

if (['not-allowed'].includes(user.role)){
  throw redirect({ ... })
}

sensitive-blueOP•15mo ago

yes i know the logic i'm just worry about the Layout pattern is suitable for this type of complex work? , my route files can easily become complicated and incomprehensible. i already use it for auth protection

helpful-purple•15mo ago

That's fine. You don't need to make this very complicated. Its a matter of where you want this logic to live. My reasoning for not using navigation blocking here, is because this is not a suitable usecase for it, since it doesn't account for direct url visits.

sensitive-blueOP•15mo ago

it's okey than 😄 i dont think use navigation blocking any more

helpful-purple•15mo ago

You can ofc, have a separate function that does this also.

function checkRole(role: string, typeOfAccessNeeded: 'admin-level' | 'employee-level') {
  // base on your conditions throw the redirect      
}

function checkRole(role: string, typeOfAccessNeeded: 'admin-level' | 'employee-level') {
  // base on your conditions throw the redirect      
}

export const Route = createFileRoute('/posts')({
 beforeLoad: (context) => {
    checkRole(context.user)
  }
})

export const Route = createFileRoute('/posts')({
 beforeLoad: (context) => {
    checkRole(context.user)
  }
})

sensitive-blueOP•15mo ago

your suggestion is do it on every route file i think

helpful-purple•15mo ago

Upto you. Either do it on every route or use the layout pattern. With that function I showed you above. Your actual logic will live in a single file.

sensitive-blueOP•15mo ago

less code duplication is better thx for your help its hard decision for me i'm trying but i think its not possible to do this after fetch Tanstack Query because beforeLoad always work before javascript bundle the reason why i can not put inside user info to router context

helpful-purple•15mo ago

I mean if you were you using route context away for the layout route, wouldn't you already have the user object?

helpful-purple•15mo ago

Essentially it's this https://github.com/SeanCassiere/nv-rental-clone/blob/523ad5bcab72562269e034f36cf5bae6cb0c6a6c/src/app-entry.tsx#L100

GitHub

nv-rental-clone/src/app-entry.tsx at 523ad5bcab72562269e034f36cf5ba...

Navotar with Tailwind and the Tanstack. Contribute to SeanCassiere/nv-rental-clone development by creating an account on GitHub.

Gaming

Programming

Role base URL protection

Did you find this page helpful?