我的问题很简单。如何防止非授权用户在sapper中输入特定路由?
user.svelte
<script>
import { onMount } from 'svelte';
onMount(() => {
if(!authenticated)
window.history.back()
});
</script>
在挂载到DOM之前有没有运行一些代码的选项?
如何解决这类问题?
谢谢。
发布于 2019-09-29 23:23:27
我不能说这是正确的事情。我在水疗中心就是这么做的。如果我想保护我的应用程序的所有路由。我在_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'
是你在后端检查会话的地方。
发布于 2019-11-06 19:42:03
我想我基本上也有同样的问题。我在SO上发布了question (with solution),并在Sapper GitHub的this issue的帮助下,用我自己的“身份验证重定向中间件”解决了它。
发布于 2020-10-11 01:45:24
让我来概括一下这个问题。实现客户端和后端的会话状态同步。那么最好的方法是什么呢?这是一个很难的问题。那得看情况。
例如,当远程用户试图访问受限制的区域时,如果您试图保护有价值的东西,这是非常简单的。只需重定向到登录/注册页面。但是,如果一个远程用户注销,而第二个用户在从后端重新加载之前尝试在同一浏览器上登录同一应用程序,该怎么办?我们很快就跳到了逻辑陷阱。那么如何根据远程会话状态正确地操作DOM树呢?
最好的方法可能就是控制路由之间的转换。在sapper中,您应该通过为每个模块导出preload函数来做到这一点。
因此,将逻辑放入_layout.svelte (在我看来,这很简单,但不是一种简单的方式)。我们应该创建一个通用模块route-guards.js
作为示例。然后我们应该把它导入到每个模块中。
答案的其余部分:
// 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');
}
}
<!-- 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开发太难了。感谢大家的关注。
https://stackoverflow.com/questions/58153372
复制相似问题