Achieve different set of system routes with Svelte kit

[AsuraKev]

Hi there,

I have a scenario where I need to have a different set of routes configuration based on an identifier e.g in react router we can do

const routesA = [
{
'path': '/dashboard',
'component':
}
/// contact page not available
];

const routesB = [
{
'path': '/dashboard',
'component':
},
/// contact page available
{
'path': '/contact',
'component':
},
];

if(id === 1){
loadRoute(routesA);
}else{
loadRoute(routesB);
}

I dont want to do dynamic components for a given route because they have different route definitions.

Is this possible to achieve with Sveltekit file base routing?

thanks

[eltigerchino]

One way that comes to mind is using a conditional in hooks.server.js

// src/hooks.server.js
import { error } from '@sveltejs/kit';

// list of routes to check against
const routesB = new Set(['/contact']);

/** @type {import('@sveltejs/kit').Handle} */
export async function handle({ event, resolve }) {
    // check if route is special and if id can visit it
	if (routesB.includes(event.url.pathname) && id === 1) {
		throw error(404, {
			message: 'Not found'
		});
	}

    // proceed as usual otherwise
	const response = await resolve(event);
	return response;
}

https://kit.svelte.dev/docs/hooks#server-hooks-handle

Otherwise, you can group the routes in one folder and use a conditional in the layout load function.

// src/routes/(routesB)/+layout.server.js
// all routes under the routesB folder will have this "guard"
import { error } from '@sveltejs/kit';

/** @type {import('./$types').LayoutServerLoad} */
export async function load() {
  if (id === 1) {
	throw error(404, {
		message: 'Not found'
	});
  }
}

https://kit.svelte.dev/docs/advanced-routing#advanced-layouts-group