Sapperjs 应用程序用户登录菜单而不是站点范围的菜单

Question

我正在使用 sapper 模板应用程序，我能够创建用户并记录他们并将他们重定向到用户部分。我的问题是关于显示在网站顶部的网站范围菜单。

在顶部的菜单中，我有主页、signin/login和注册。现在，当用户尝试登录并成功时，我应该将他们重定向到用户部分，顶部的菜单从 (home, login, register) 替换为 ("logout", "Profile")，这是典型的站点范围行为。

我不知道如何在 Sapper 中执行此操作。我的理解是我在 routes 文件夹中有 _layout.svelte 。在那个 component/file 中，我有 nav.svelte 代码是：

    <nav>
    <ul>
  
    <li><a class:selected='{segment === undefined}' href='.'>home</a></li>        
    <li><a class:selected='{segment === "register"}' href='register'>Register</a></li>
    <li><a class:selected='{segment === "signin"}' href='signin'>Signin</a></li>
   
  </ul>
  
</nav>

并且在 _layout.svelte 中，它是简单的组件 :

 <Nav {segment}/>

<main>
    <slot></slot>
</main>

我将不考虑样式代码，因为它无关紧要。那么，如何在 Sapper 中根据用户状态（已登录或未登录）在站点顶部显示特定的菜单项？我可以在 nav.svelte 或 _layout.svelte 中使用 if/else 吗？它负责在路由文件夹中的每个组件的顶部显示菜单。

感谢任何帮助...我希望解决方案不涉及使用外部库，因为它违背了使用 Sapperjs 的目的。 sapper 是否能够根据条件在顶部显示不同的菜单？怎么做？

Answer 1

您可以在导航组件中使用 if/else

<li><a class:selected='{segment === undefined}' href='.'>home</a></li>        
{#if userLoggedIn}
    <li><a class:selected='{segment === "profile"}' href='profile'>Profile</a></li>
    <li><a href='logout'>Logout</a></li>
{:else}
    <li><a class:selected='{segment === "register"}' href='register'>Register</a></li>
    <li><a class:selected='{segment === "signin"}' href='signin'>Signin</a></li>
{/if}

要获得 userLoggedIn，您可能会使用商店，或者从会话中填写它。

Sapperjs 应用程序用户登录菜单而不是站点范围的菜单

Sapperjs app user logged menu instead of the site wide menu

svelte-3

sapper