Is there a way to access staticData in beforeLoad?

[visualjerk]

Currently we use staticData to add permitted roles to each route. This works like a charm, when authorizing a user with the "Non-Redirected Authentication" approach. However that has the downside of route loader to be triggered even though a user is not authorized to access it. Therefore we would like to migrate to the Redirecting approach.

Is there a way to access staticData of all matches in beforeLoad of a parent route, so we can authorize a user there as well? If not, is there an alternative way to add roles to each route, which is accessible in beforeLoad?

Or to state it in another way, is there a function to access the current matches, similar to useMatches?

[stevenlyd]

I'm looking for the exact same thing! It would be awesome if we can access the entire route object in beforeLoad.
Before that's possible, there might be a walk-around for this.
I have this function to setup a temporary router and therefore we have access to the initialized route tree and we can do something with it, outside the scope of react.

import { AnyRoute, createRouter } from "@tanstack/react-router";

export const iterateRouteTree = <T>(
  rootRoute: AnyRoute,
  callback: (route: AnyRoute) => false | T
): T[] => {
  const tempRouter = createRouter({
    routeTree: rootRoute,
  });

  tempRouter.buildRouteTree();

  const result: T[] = [];
  const stack: AnyRoute[] = [tempRouter.routeTree];

  while (stack.length > 0) {
    const currentRoute = stack.pop();

    if (currentRoute) {
      const parsedData = callback(currentRoute);

      if (parsedData) {
        result.push(parsedData);
      }

      const children = currentRoute?.children as AnyRoute[];

      if (children && children.length > 0) {
        children.forEach((child) => {
          stack.push(child);
        });
      }
    }
  }

  return result;
};

Just put your generated route tree into this and you can ieterate through it and do whatever you want with a callback function.
You can use it to establish a Map from each route's full path to it's staticData.
Something like this:

import { routeTree } from "@/routeTree.gen";
import { iterateRouteTree } from "./iterateRouteTree";

let permissionsMap: Map<string, string[]> | null = null;

const generatePermissionsMap = () => {
  const iterateResult = iterateRouteTree<[string, string[]]>(routeTree, (route) => {
    const { fullPath } = route;
    const { requiredPermissions = [] } = route.options.staticData ?? {};

    return [fullPath, requiredPermissions];
  });
  permissionsMap = new Map<string, string[]>(iterateResult);
};

export const getPermissionsMap = () => {
  if (!permissionsMap) {
    generatePermissionsMap();
  }

  return permissionsMap;
};

Then you might put it into the router context therefore you can access it from beforeLoad.
I haven't try it yet but looks like it would work.
Or, we may just use the routesByPath property in router (put the router itself into the router context?), like this:

router.routesByPath[location.pathname]

I'm currently using this iterateRouteTree function to grab some properties from each route's staticData and generate a json file when making a build.

[stevenlyd]

@visualjerk I tried the second method, it worked, my code look like this:

export const Route = createFileRoute("/_protected")({
  beforeLoad: async ({ location, context: { router, queryClient } }) => {
    if (router && queryClient) {
      const regex = new RegExp(`/${baseName}(.*)`);
      const parsedPath = location.pathname.match(regex)?.[1];
      if (parsedPath) {
        const { options: { staticData: { requiredPermissions = [] } = {} } = {} } =
          router.routesByPath[parsedPath] ?? {};
        const currentPermissions =
          queryClient.getQueryData<string[]>(["permissions", baseName]) ?? [];
        if (
          (requiredPermissions as string[])?.some(
            (permission) => !currentPermissions.includes(permission)
          )
        ) {
          console.warn("Permission denied");
          throw redirect({
            from: "/",
            to: "/",
            replace: true,
          });
        }
      }
    } else {
      throw redirect({
        from: "/",
        to: "/",
        replace: true,
      });
    }
  },
});

If you have a basePath you need to remove it before trying to match like I did.

[visualjerk]

Thanks for this idea. Did you type the RouterContext as well? If so, I would be curious about how you did it.

After all, we will probably stick to checking the permissions in our root layout until route matches are provided in beforeLoad out-of-the-box to avoid additional complexity and possible points of failure.

[stevenlyd]

Thanks for this idea. Did you type the RouterContext as well? If so, I would be curious about how you did it.

After all, we will probably stick to checking the permissions in our root layout until route matches are provided in beforeLoad out-of-the-box to avoid additional complexity and possible points of failure.

Yes I typed the RouterContext, so that I can pass the router instance itself into the router's context. The drawback of this method is the router in router context doens't have any typesafety, since we type it as AnyRouter to avoid circular reference. But I believe typesafety doesn't matter in this particular use case.

I created a pathless route (also known as layout route), all routes that might requires permissions are wrapped by this pathless route.

The user's granted permissions are already fetched and cached in TanStack Query by a parent component which doesn't requrie permissions.

Below is my current setup.

// Define the type for the staticData
interface RouteStaticData {
  title: string;
  icon?: JSX.Element;
  description?: string;
  requiredPermissions?: string[];
}


// Hook up the types
declare module "@tanstack/react-router" {
  interface Register {
    router: typeof router;
  }

  interface StaticDataRouteOption extends RouteStaticData {}
}


// __root.tsx
import { TanStackRouterDevtools } from "@tanstack/router-devtools";
import { AnyRouter, createRootRouteWithContext, Outlet } from "@tanstack/react-router";
import { QueryClient } from "@tanstack/react-query";

export const Route = createRootRouteWithContext<{
  queryClient?: QueryClient;
  router?: AnyRouter;
}>()({
  component: () => (
    <>
      <Outlet />
      {import.meta.env.MODE === "development" && <TanStackRouterDevtools position="top-right" />}
    </>
  ),
  staticData: {
    title: "Root",
  },
});


// Create the router and set all context properties to undefined as initial value
const router = createRouter({
  routeTree,
  basepath: "/fake-app",
  context: {
    queryClient: undefined,
    router: undefined,
  },
  defaultPreload: "intent",
  defaultPreloadStaleTime: 0,
});


// Now we can pass the router to the context
<RouterProvider
    router={router}
    context={{ queryClient: client, router }}
    history={history}
  />


// Assign required permissions to routes
export const Route = createFileRoute("/_protected/customers")({
  staticData: {
    requiredPermissions: ["MARKETING", "SALES"],
  },
});


// All routes requries permissions are wrapped by this pathless route
import { createFileRoute, redirect } from "@tanstack/react-router";
import { baseName } from "@/utils/baseName";

export const Route = createFileRoute("/_protected")({
  beforeLoad: async ({ location, context: { router, queryClient } }) => {
    if (router && queryClient) {
      const regex = new RegExp(`/${baseName}(.*)`);
      // Remove app basename from the pathname
      const parsedPath = location.pathname.match(regex)?.[1];
      if (parsedPath) {
        const { options: { staticData: { requiredPermissions = [] } = {} } = {} } =
          router.routesByPath[parsedPath] ?? {};
        const currentPermissions = queryClient.getQueryData<string[]>([
          "permissions",
          baseName,
        ]);
        if (
          (requiredPermissions as string[])?.some(
            (permission) => !currentPermissions.includes(permission)
          )
        ) {
          console.warn("Permission denied");
          throw redirect({
            from: "/",
            to: "/",
            replace: true,
          });
        }
      }
    } else {
      throw redirect({
        from: "/",
        to: "/",
        replace: true,
      });
    }
  },
  staticData: {
    title: "Protected Route",
  },
});

[Rendez]

I also need this badly.

[Rendez]

I wrote a small version that should work, let me know if I got anything wrong...

import { Route } from './routes/__root';
import { BeforeLoadContext } from '@tanstack/react-router/dist/esm/route';
import { createRoute } from '@tanstack/react-router';

class PermissionCheckError extends Error {
  constructor(permission: string) {
    super(`Missing permission: ${permission}`);
    this.name = 'PermissionCheckError';
  }
}

type RouteOptions = (typeof Route)['options'];
function withPermissions<T extends RootRouteContext>(
  beforeLoad?: (this: RouteOptions, ctx: BeforeLoadContext<void, void, T>) => Promise<T> | T | void,
) {
  return function beforeLoadWrapped(this: RouteOptions, ctx: BeforeLoadContext<void, void, T>) {
    if (this.staticData?.permissions?.length) {
      const permissions = ctx.context.queryClient /*.getPermissions()*/ ?? [''];
      const missingPermission = this.staticData.permissions.find((p) => !permissions.includes(p));
      if (missingPermission) {
        throw new PermissionCheckError(missingPermission);
      }
    }
    return beforeLoad?.call(this, ctx);
  };
}
const Route = createRoute({
  staticData: {
    permissions: ['write:clusters'],
  },
  getParentRoute: () => ...,
  path: '...',
  beforeLoad: withPermissions((_ctx) => {
    // do whatever you would do inside the beforeLoad function
  }),
  // [...]
});

⚠️ The problem with this approach is that the typing for search and params is lost. It might not be possible, but I like this as it is quite elegant as a solution.

[Rendez]

✅ Let me also point out that what I am trying to achieve is that, while having route matches during render phase is useful to check for permissions to hide/prevent certain UI actions, on navigation, often times we want to disallow a route even before fetching any further resources that require some permission. Given we know the user permissions in advanced, we can throw a redirect or render a fallback. That's why I used beforeLoad, which assumes the user permissions were fetched already in a parent component and are cached.

The next works on each route, allows you to catch and act granuarly when PermissionRouteError is throw...

class PermissionRouteError extends Error {
  constructor(permission: string) {
    super(`Missing permission: ${permission}`);
    this.name = 'PermissionCheckError';
  }
}

export function withRoutePermissions<
  T extends {
    options: {
      staticData?: StaticDataRouteOption;
      beforeLoad?: (
        // eslint-disable-next-line @typescript-eslint/no-explicit-any
        ctx: BeforeLoadContext<any, any, any>,
      ) => // eslint-disable-next-line @typescript-eslint/no-invalid-void-type
      Promise<RouteContext> | RouteContext | void;
      errorComponent?: false | null | ErrorRouteComponent;
    };
  },
>(route: T) {
  const _beforeLoad = route.options.beforeLoad;
  route.options.beforeLoad = function beforeLoad(ctx: BeforeLoadContext<unknown, unknown, RootRouteContext>) {
    if (!this.staticData?.permissions?.length) {
      throw new PermissionRouteError(
        'withPermission(): permissions are required. Define them in the staticData of the route.',
      );
    }
    if (this.staticData.permissions?.length) {
      const permissions = ctx.context.queryClient /*.getPermissions()*/ ?? [''];
      const missingPermission = this.staticData.permissions.find((p) => !permissions.includes(p));
      if (missingPermission) {
        throw new PermissionRouteError(missingPermission);
      }
    }
    return _beforeLoad?.(ctx);
  };
  const _errorComponent = route.options.errorComponent;
  route.options.errorComponent = function errorComponent(props) {
    if (_errorComponent) {
      return createElement(_errorComponent, props);
    }
    if (props.error instanceof PermissionRouteError) {
      return `Permission denied: ${props.error.message}`;
    }
    throw props.error;
  };
  return route;
}

[Rendez]

const Route = withRoutePermissions(createRoute({
  path: '/...'
  staticData: {
    permissions: ['user.read', ...]
  }
  onError(err) {
    throw redirect(...) // ... or throw notFound()
  }
 // or
  errorComponent() {
    return <div>Permission errors</div>
  }
});

[Rendez]

If I see much interest in this solution over @stevenlyd's, I'll create a code sandbox.

[ViewableGravy]

I assume this discussion can be closed now, given that beforeLoad has access to the route matches?

[visualjerk]

Yes, thanks for adding this functionality 🙏