Lifecycle hook? about routify

[khuongduybui]

Got it. I will definitely give it a try this weekend!

[jakobrosenberg]

Not currently. I resolve auth in App.svelte.

{#if authorized}
<Router />
{/if}

Do you have a specific use case in mind?

[khuongduybui]

How do I render my login / signup and other public pages then?

[jakobrosenberg]

There are a few approaches depending on the nature of your app.

If it's a strict admin dashboard

• redirect to pages/login.svelte and change the condition to
  {#if authorized || ['login', 'register'].includes(location.pathname)}
• you could also just render a login page whenever a user isn't logged in, regardless of the pathname.

{#if authorized}
  <Router />
{:else}
  <Login>
{/if}

If only parts of your app is restricted to authorized users, like an admin module, you could include the conditional in the _layout.svelte / _reset.svelte of the module. Then any page within the module is subject to the condition.

[khuongduybui]

Thanks for the explanation.
I've been using _layout.svelte for authn / authz logic in Sapper preload() hook, but since we are not using Sapper, I'm not sure where to put the logic in.

Basically what I want is just some logical redirection:

• If visitor has not logged in, member-only pages will redirect to login page
• If visitor has logged in but is not admin, admin-only pages will redirect to home page
• Unknown routes redirect to fallback page (home or a custom 404)

[jakobrosenberg]

_layout.svelte is a confusing name at times. I would have preferred _modules.svelte, but that could be confusing to people coming from Sapper.

The most straight forward approach would be a separate module for members and admins. Ie. src/pages/admin/_layout.svelte and src/pages/members/_layout.svelte

If you'd prefer more granularity, you could (should) authorize in App.svelte and include the user and/or user-role in the scope.

Once something is added to the scope, it's available to all components nested through router.

<!-- App.svelte-->
<script>
  let user = false
  authorizingScript().then((payload)=>{
    user = payload.user
})
</script>

{#if user}
  <Router scoped={{user}}>
{:else}
  <!-- Loading animation or text -->
{/if}

<!-- src/pages/notifications/_layout.svelte-->
<script>
  export let user
  $: user.isGuest && history.pushState(null, null, '/login');
</script>

{#if !user.isGuest}
<-- content -->
{/if}

[jakobrosenberg]

For 404s, there's _fallback.svelte. You can have multiple fallbacks. Ie. src/pages/_fallback.svelte and src/pages/admin/_fallback.svelte. The first fallback found while traversing back through the tree is used.