注销时在 Svelte-Routing 中隐藏路由答案

【问题标题】：Hide Routes in Svelte-Routing when logged out注销时在 Svelte-Routing 中隐藏路由
【发布时间】：2019-07-16 23:08:26
【问题描述】：

当我尝试在用户未登录时隐藏某些路线的页面时，它运行良好。但是一旦用户登录，当我使用svelte-routing 的navigate 方法导航到页面时，页面不再显示内容。但是，一旦我单击路线，它们就会很好地呈现。难道我做错了什么？下面是基本设置。 You can also find it on github.

App.svelte

您可以在下面的示例中看到，我将Routes 隐藏在if-else 子句中的main HTML 标记下。当我在页面/somewhere 并且我也已经注销然后单击登录然后单击提交时，它应该带我回到/somewhere 确实如此。但是直到我单击链接Somewhere 之前，文本Somewhere 并没有像它应该显示的那样显示。预期的结果是它会出现。

<script>
import { Router, Link, Route, navigate } from "svelte-routing"
import Login from "./Login.svelte"
import Somewhere from "./Somewhere.svelte"
import Home from "./Home.svelte"

let user = null
var previousPath

$: user

function logout() {
    localStorage.clear()
    user = null
    navigate("/")
}

function loggedIn (event) {
    if (event) {
        user = { name: "George" }
        navigate(previousPath, { replace: true })
    }
}

function loggingIn() {
    previousPath = window.location.pathname
}

</script>

<Router>
    <h1>Test Login</h1>
    <nav>
        <Link to="/">Home</Link>
        {#if user === null}
        <Link to="/login" on:click={loggingIn}>Login</Link>
        {:else}
        <Link to="/somewhere">Somewhere</Link>
        <form on:submit={logout}>
            <input type="submit" value="Logout" />
        </form>
        {/if}
    </nav>
    <main>
        {#if user !== null}
        <Route path="/somewhere"><Somewhere /></Route>
        <Route path="/"><Home /></Route>
        {:else}
        <p>Please login</p>
        <Route path="/login"><Login on:loggedIn={loggedIn} /></Route>
        {/if}
    </main>
</Router>

这是其他页面：

Home.svelte

<p>Yellow!</p>

Login.svelte

<script>
import { createEventDispatcher } from "svelte";

const dispatch = createEventDispatcher()

function submit() {
    dispatch("loggedIn", true)
}
</script>

<form on:submit={submit}>
    <input type="submit" value="Submit" />
</form>

Somewhere.svelte

<p>Somewhere!</p>

【问题讨论】：

标签： svelte

【解决方案1】：

经过一番调查，我发现你可以使用tick函数如下：

import { tick } from "svelte"

...

async function loggedIn (event) {
    if (event) {
        user = { name: "George" }
        await tick()
        navigate(previousPath, { replace: true })
    }
}

它可以工作，但看起来很难看。我不确定是否有更好、更清洁的方法来做到这一点，所以你必须坚持下去。

tick 是一个函数，一旦应用了任何挂起的状态更改，它就会解析。在您的情况下，当修改 user 时，它会确保显示 {:else} 块的内容（虽然是空的），然后导航到上一个路径，这会导致在 Route 中安装组件。

【讨论】：