sveltekit

Use same route in svelte, but show different content per user role


In sveltekit, I want to use route like /home for two types of user, but having different content:

This would mean that those two outcomes should have different +page.ts to use load function to get the page data.

Whole thing is an SPA, so server part of the sveltekit is not used.

Is this possible?

PS. It is kind of opposite of this question


Solution

  • I do not think this is possible at the routing level.

    Would probably return different objects depending on role and extract the content to separate components (these can be in the same directory as the +page.svelte).

    // (in page load function or directly in the backend)
    if (/* role check for admin */) {
      return { type: 'admin', users: /* ... */, ... };
    else
      return { type: 'user': tasks: /* ... */, ... };
    
    {#if data.type == 'admin'}
      <AdminView users={data.users} />
    {:else if data.type == 'user'}
      <UserView tasks={data.tasks} />
    {/if}