Running function on every route change?

[nooblyf]

I was trying out +layout files but they seem to run only on initial load (full page refresh), what i'm looking for is to run a check session function which makes an api request to the server on every route change (goto and href), and then redirect them to /login page if the session has expired, is this possible?

[eltigerchino]

You could call invalidate or invalidateAll whenever the user navigates to a new page (using the navigating store or the afterNavigate lifecycle function).

https://kit.svelte.dev/docs/modules#$app-navigation-invalidate
https://kit.svelte.dev/docs/modules#$app-navigation

[nooblyf]

Thanks, I was able to solve this by combination of navigating store and hooks

I've added this part in +layout.svelte that checks if session is valid on every route change and reloads the page if session has expired

$: if ($navigating)
  Auth.isValidSession().then(isValidSession => {
    if (isValidSession === false) location.reload();
  });

Then, the rest of it is taken care by hooks.server.ts

export const handle: Handle = async ({ event, resolve }) => {
  const requestURL = event.url;
  const sessionID = event.cookies.get('session_id') ?? null;

  if (sessionID !== null && (await isValidSession(sessionID))) {
    if (requestURL.pathname.startsWith('/login')) throw redirect(302, '/');

    event.locals = {
      ...event.locals,
      sessionID,
    };
    return resolve(event);
  } else {
    if (requestURL.pathname.startsWith('/login')) {
      clearSession(event);
      return resolve(event);
    }

    const next =
      requestURL.pathname === '/'
        ? ''
        : `?next=${encodeURIComponent(requestURL.pathname + requestURL.search)}`;

    throw redirect(302, `/login${next}`);
  }
};

[stephane-vanraes]

You could also use beforeNavigate for this https://kit.svelte.dev/docs/modules#$app-navigation-beforenavigate where you check everytime before navigating if the user is still ok, if not do cancel and go to the login screen

[david-plugge]

You need the load function to subscribe to a url change by actually using the url in the load function.

export const load = ({ url }) => {
  url.pathname
}

This tells kit that you want to rerun the function on path change

[shellwhale]

Does this come with any potential drawbacks or one might use it as much as they want?

[david-plugge]

No, there should not be any issue with this approach. I always use this pattern for checking the User Session.