Sapper/svelte3 会话在没有页面重新加载的情况下不同步答案

【问题标题】：Sapper/svelte3 session not synchronizing without page reloadSapper/svelte3 会话在没有页面重新加载的情况下不同步
【发布时间】：2019-12-22 03:57:48
【问题描述】：

我无法让 Sapper 在没有页面加载的情况下同步在我的服务器端路由中所做的会话更改。我的示例场景是我在会话中没有用户的情况下加载我的应用程序，我的服务器端登录路由将用户设置为会话，然后我使用goto 进入仪表板。

问题是仪表板预加载函数中的session 参数未填充。如果我使用window.location.href = '/dashboard'，是的，因为它通过 Sapper 的page_handler 运行。但是，如果我只进行客户端重定向，Sapper 不会将更新后的会话发送给客户端。

有什么办法吗？我是不是用错了工具？

注意：我正在使用 connect-pg-simple 和 express-session，像这样设置 sapper：sapper.middleware({session: (req, res) => req.session.public})。

【问题讨论】：

看看：stackoverflow.com/questions/58002360/…

标签： session sapper svelte-3

【解决方案1】：

我在Sapper docs找到了我的答案

session 包含在服务器上播种的任何数据。它是一个可写存储，这意味着您可以使用新数据对其进行更新（例如，在用户登录后）并且您的应用会被刷新。

字里行间，这表明您的应用必须手动同步会话数据。

这里的解决方案是手动将会话数据同步到客户端，可以使用 webhook 连接、响应标头或响应数据中的键。

我有一个装饰器，用于创建服务器路由处理程序，在其中我将会话数据添加到响应中。这是一个简化的版本：

const createHandler = getData => (req, res) => {
  res.status(200).json({data: getData(req.body), session: req.session.public})
}

显然不止于此，例如错误处理，但你明白了。在客户端，我将fetch 包装在一个辅助函数中，无论如何我总是使用它来获取我的json、设置正确的标头等。在其中，我查看响应，如果有session 属性，我设置到会话存储，以便它在我的preloads 中可用。

import {stores} from "@sapper/app"

const myFetch = (...args) => fetch(...args).then(r => r.json()).then(body => {
  if (body.session) stores().session.set(body.session)

  return body.data
})

【讨论】：

感谢您的回答。我有点理解你的回答，但我无法让我的预加载来传递数据。您是否介意发布您的预加载示例 "
不幸的是，我无法让预加载工作（会话是问题的一部分，我认为还有其他问题），所以我没有工作示例。

【解决方案2】：

简单地说，在您的会话状态更改从前端（用户刚刚登录，或者您刚刚使他的登录无效）之后，您应该更新前端的会话存储。

<script>
  import { goto, stores } from '@sapper/app';
  const { session } = stores();

  const loginBtnHandler = () => {

    const req = await fetch('/api/login', {
      method: 'POST',
      credentials: 'same-origin', // (im using cookies in this example)
      headers: {
        'Content-Type': 'application/json',
      },
      body: JSON.stringify({ ........ })
   });

   if (req.ok) {
     // here is where you refresh the session on the client right after you log in
     $session.loggedIn = true; // or your token or whatever

     // next page will properly read the session
     goto('/');

     return;
   }

   ...

  }
</script>

【讨论】：