首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >Sapper保护的路由(路由保护)

Sapper保护的路由(路由保护)
EN

Stack Overflow用户
提问于 2019-09-29 15:59:34
回答 4查看 3.9K关注 0票数 6

我的问题很简单。如何防止非授权用户在sapper中输入特定路由?

user.svelte

代码语言:javascript
运行
复制
<script>
    import { onMount } from 'svelte';

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

在挂载到DOM之前有没有运行一些代码的选项?

如何解决这类问题?

谢谢。

EN

回答 4

Stack Overflow用户

发布于 2019-09-29 23:23:27

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

代码语言:javascript
运行
复制
<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'是你在后端检查会话的地方。

票数 8
EN

Stack Overflow用户

发布于 2019-11-06 19:42:03

我想我基本上也有同样的问题。我在SO上发布了question (with solution),并在Sapper GitHub的this issue的帮助下,用我自己的“身份验证重定向中间件”解决了它。

票数 1
EN

Stack Overflow用户

发布于 2020-10-11 01:45:24

让我来概括一下这个问题。实现客户端和后端的会话状态同步。那么最好的方法是什么呢?这是一个很难的问题。那得看情况。

例如,当远程用户试图访问受限制的区域时,如果您试图保护有价值的东西,这是非常简单的。只需重定向到登录/注册页面。但是,如果一个远程用户注销,而第二个用户在从后端重新加载之前尝试在同一浏览器上登录同一应用程序,该怎么办?我们很快就跳到了逻辑陷阱。那么如何根据远程会话状态正确地操作DOM树呢?

最好的方法可能就是控制路由之间的转换。在sapper中,您应该通过为每个模块导出preload函数来做到这一点。

因此,将逻辑放入_layout.svelte (在我看来,这很简单,但不是一种简单的方式)。我们应该创建一个通用模块route-guards.js作为示例。然后我们应该把它导入到每个模块中。

答案的其余部分:

代码语言:javascript
运行
复制
    // route-guards.js
    export async function transitionControl(self, page, session) {
        const result = await self.fetch('/is-logged-in');  // self for support server side rendering
        const response = await result.json();
    
        if (!response && page.path !== '/login') {
            return self.redirect(302, '/login');
        }
    }
代码语言:javascript
运行
复制
    <!-- any module.svelte -->
    <script context="module">
        import { transitionControl } from "./route-guards";
    
        export async function preload(page, session) {
            await transitionControl(this, page, session);
            // Do another what you want before page load
        }
    </script>

请记住,两件事之间的同步状态永远不会像你想的那样容易。OMG web开发太难了。感谢大家的关注。

票数 1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/58153372

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档