How to return data and redirection as before breaking changes?

[NormandoHall]

Before I have this load code inside __layout.svelte:

<script context="module">
  export async function load({ session, url }) {
    if (!session.user && url.pathname != '/access') {
      return {
        status: 302,
        redirect: 'access',
        props: { logged: false }
      };
    } else if (session.user && url.pathname == '/access') {
      return {
        status: 302,
        redirect: '/',
        props: { logged: true }
      };
    } else if (!session.user && url.pathname == '/access') {
      return {
        props: {
          siteName: session.siteName,
          logged: false
        }
      };
    }
    return {
      props: {
        siteName: session.siteName,
        logged: true
      }
    };
  }
</script>

Now I have the new file +layout.js with the same code to be changed to new requirements. So how to return data and redirect? For example from:

//...

      return {
        status: 302,
        redirect: '/',
        props: { logged: true }
      };

to:

import { redirect } from '@sveltejs/kit';
//...

      return {
        logged: true
      };

      throw redirect(302, '/');

This is bad, I know, but I can't figure how to do it.

Thanks

[rmunn]

Did this ever work?

      return {
        status: 302,
        redirect: 'access',
        props: { logged: false }
      };

When you return a redirect, I would have expected the props to get lost, because the user's browser would load the redirect but wouldn't know about the props. Unless Svelte-Kit was handling the redirect internally, which I admit I never looked into deeply. Since you're asking this question, I assume you had working code before, so maybe I was wrong about how redirects got handled.

Anyway, in the new world, I would think your code would need to run on the server, i.e. in +layout.server.js rather than in +layout.js. Because it's going to be checking if the user is logged in, which is something you'll need to use event.locals for (since session is gone). At that point, you may be able to do something like having the server load() function return props like { redirect: '/somewhere', logged: true } while the browser load() function loads the parent props and throws a redirect if the parent props include a redirect value. (NOTE: I haven't tried this yet, as I'm a bit short on time right now. It might not work, this is just an idea." E.g.,

/// +layout.server.js
// ... rest of load function goes here ...
return {
  redirect: '/',
  redirectStatus: 302,
  logged: false
};

///+layout.js
/// ... rest of load function goes here ...
const data = await parent();
if (data.redirect) {
  throw redirect(data.redirectStatus || 302, data.redirect);
}

Since the data values from all load functions are merged together, this should result in the same behavior as before, where logged ends up available to the page that you redirect to. (At least, I'm guessing it should result in the same behavior. As I said, I was surprised that returning redirects alongside props worked at all, so it may or may not have been intended behavior.)

Anyway, give that a try, and if it doesn't work, create a simple repro and open up a bug report. Because if that's supposed to work and it doesn't, then that's a bug. And if that's not supposed to work but you were led to believe that it should work, then that's a documentation issue where the docs need to be clearer. Either way, if that doesn't work, opening an issue is probably appropriate.

[NormandoHall]

Hello @rmunn. Thanks for your detailed reply.

Yes, this code actually runs in two instances that still uses kit 405. The rest of layout code simplified is this. I used logged to switch layout UI look, and redirection to redirect in case is logged in or not.

<script>
  // import toolbar, sidebar components, etc...
  export let siteName;
  export let logged;
</script>

<svelte:head>
  {#if logged}
    <title>{siteName}</title>
  {:else}
    <title>System Access</title>
  {/if}
</svelte:head>

{#if logged}
  <!-- sidebar component -->
    <slot />  // landed all the site
  <!-- footer component -->
{:else}
  <slot />  // shows the /access route with a login form without sidebar and footer components
{/if}

About the new world, I will test your suggests code and back soon with the results.

Thank you!