T
TanStack•17mo ago
rare-sapphire

Is it possible to trigger beforeLoad of a folder index route and respective sub routes?

I have the folder structure in the image, i've changed folder name from _layout to _authenticated. In the index of admin, i have this before load: 
export const Route = createFileRoute("/_authenticated/admin/")({
  beforeLoad: async () => {
    const user = await getUser();
    if (!user) {
      throw redirect({ to: "/login" });
    }

    const isUserAdmin = user.roles.some((role) => ADMIN_ROLES.includes(role));
    if (!isUserAdmin) {
      throw notFound();
    }
  },
  errorComponent: ({ error }) => <ErrorComponent error={error} />,
});
export const Route = createFileRoute("/_authenticated/admin/")({
  beforeLoad: async () => {
    const user = await getUser();
    if (!user) {
      throw redirect({ to: "/login" });
    }

    const isUserAdmin = user.roles.some((role) => ADMIN_ROLES.includes(role));
    if (!isUserAdmin) {
      throw notFound();
    }
  },
  errorComponent: ({ error }) => <ErrorComponent error={error} />,
});
Do i need to create this same beforeLoad in every nested admin route? Edit: typos
No description
9 Replies
optimistic-gold
optimistic-gold•17mo ago
The code you pasted seems to be from the _layout route, not admin. Apart from that, what is not working for you? beforeLoad of a route is called before rendering all nested routes so yes, you can do that and it is the recommended way. (See more: https://tanstack.com/router/latest/docs/framework/react/guide/authenticated-routes)
rare-sapphire
rare-sapphireOP•17mo ago
I noticed that now and also my question wasn't properly written. But that is what i meant yes
optimistic-gold
optimistic-gold•17mo ago
Great! Then yes, you're on the good track 🙂
rare-sapphire
rare-sapphireOP•17mo ago
@Leonardo i've re written, see if it makes sense now What i need is to check user auth, and if it doesn't match the role i want to go to the not found page. That code works if i access the /admin route but if i go to a nested route like /admin/groups, the beforeLoad from /admin isn't triggered And also, i'm not using the context because i'm using it from zustand. That is what that getUser() function does.
optimistic-gold
optimistic-gold•17mo ago
Ah I didn't notice this before, your routes have the _ suffix, which means they're not nested inside the parent. I think that's the reason why that beforeLoad is not triggered
rare-sapphire
rare-sapphireOP•17mo ago
Ok, i think i get it , and what would be the best refactor for that ?
optimistic-gold
optimistic-gold•17mo ago
In that case I'd say you either remove the suffix or if you need it extract the logic somewhere and you'll have to add it on each parent (customers, groups and leads)
rare-sapphire
rare-sapphireOP•17mo ago
I removed the _ suffix but still doesn't work I figured it out I remove the suffix and instead of having an index file inside admin folder, i had to create an admin.tsx route inside the "_layout" folder And now it works But now i have another problem but i will open a new ticket. But either way whenever i throw a notFound() i get a blank page.
optimistic-gold
optimistic-gold•17mo ago
Great 😄

Did you find this page helpful?