Sapper - 受保护的路线（路线守卫）

Question

我的问题很简单。您如何防止（例如非授权用户）在 sapper 中输入特定路线？

用户.svelte

<script>
    import { onMount } from 'svelte';

    onMount(() => {
      if(!authenticated)
        window.history.back()
      });
</script>

在挂载到 DOM 之前是否有任何选项可以运行一些代码？

您如何解决此类问题？

谢谢你。

Answer 1

我不能说这是正确的事情。这就是我在 SPA 中所做的。如果我想保护我的应用程序的所有路由。我在_layout.svelte顶级文件中创建以下内容。

<script context="module">

    import {ax} from './_parts/Helper.svelte'
    import {admin, adminName} from './store'
    import {goto} from '@sapper/app'

    export async function preload(page) {
        try {
            const {data} = await ax.get('/admin/is-logged-in')
            adminName.set(data)
            admin.set(true)
        } catch (e) {
            admin.set(false)
        }
    }
</script>

<script>
    import Login from './admin/login.svelte'
    import {loading} from './store.js'
</script>

<main>
{#if $admin}
     <slot></slot>
{:else}
     <Login />
{/if}
</main>

ax没什么神奇的。它只是配置了 axios。 '/admin/is-logged-in'是您在后端检查会话的地方。