T
TanStack•10mo ago
fair-rose

Disable link when not allowed to visit

Is there a way to share some state between the route itself and the link? I have a permission check in the route and i want to disable the link when the user cant visit it but i want to prevent from writing this logic twice since it would be really easy to miss something? I thought of this 
export const hasPermission = () => {
  const user = queryClient.getQueryData(authQueries.getMe().queryKey)
  return !!user && !user.checkPermission("can_view_dashboard")
}

export const Route = createFileRoute("/_app/index")({
  loader: async () => {
    if (!hasPermission()) throw notFound({ data: "no-permission" })
  },
  component: () => Dashboard(),
})
export const hasPermission = () => {
  const user = queryClient.getQueryData(authQueries.getMe().queryKey)
  return !!user && !user.checkPermission("can_view_dashboard")
}

export const Route = createFileRoute("/_app/index")({
  loader: async () => {
    if (!hasPermission()) throw notFound({ data: "no-permission" })
  },
  component: () => Dashboard(),
})
and on the link 
import { hasPermission as hasDashboardPermission } from '@/routes/index.tsx'

<Link to="/" disabled={hasDashboardPermission}>Dashboard</Link> 
import { hasPermission as hasDashboardPermission } from '@/routes/index.tsx'

<Link to="/" disabled={hasDashboardPermission}>Dashboard</Link>
6 Replies
fair-rose
fair-roseOP•10mo ago
could we do something like getRouteApi("/").getStaticData() to get static data from a route that is not rendered. what i would like to achieve is a custom link component that i just need to supply with an to prop and it will figure out which permission it needs based on what is set in the createFileRoute without supplying the Route object it self this way i can add the permission in 1 place for that specific route so i dont need to manage permissions on separate places.
national-gold
national-gold•10mo ago
but the data is not static, right?
fair-rose
fair-roseOP•10mo ago
The permissions itself are static. The check to see if the user has it are not. That’s why I add the logic in the loader and the link component. I just want the required permission as static data so I only need to declare that once. I will try to write an example tomorrow. I’m in bed now.
fair-rose
fair-roseOP•10mo ago
Hopefully this example makes sense https://stackblitz.com/edit/tanstack-router-bws6pje8 Inside routes/index.tsx i made a loader with a guard to check if you can visit the page, also i made a component 'permission-link' what will disable the link if the page cant be viewed, that component has an error now since im not able to get the static data of a route.
Andre de Waard
StackBlitz
Router Basic React Query File Based Example (forked) - StackBlitz
Run official live example code for Router Basic React Query File Based, created by Tanstack on StackBlitz
fair-rose
fair-roseOP•10mo ago
@Manuel Schiller sorry for tagging you, but did you had the change to look into this?
national-gold
national-gold•10mo ago
not yet

Did you find this page helpful?