标签: sapper

如果用户未经身份验证，我需要将用户重定向到登录页面。我需要类似route.beforeEachVue.js 的东西，理想情况下：

sapper.beforeRouteChange((to, from, next) => {

  const isAuth = "[some session or token check]";

  if (!isAuth) {
    next('/login')
  }

  next()
})

我发现了Sapper - protected routes (route guard)这个问题，但我认为这不足以满足我的需求。如果令牌或身份验证在运行时发生变化怎么办？或者它是否被反应性覆盖？

编辑 1：我认为Sapper GitHub 上的这个问题解决了我的问题。

这更像是一个 Service Worker 问题，尽管它可能更具体到Sapper。我真的不知道，因为我是第一个管理我与 Service Workers 斗争的人，几乎没有使用过它们，并且感觉它们经常让我感到痛苦。

基本上，无论我做什么，我都无法让 localhost:3000 停止加载应用程序的旧副本。我已经以各种方式取消注册服务工作者，包括尝试以编程方式取消注册。我清除了缓存，甚至清除了浏览器中的所有浏览数据。我的 Sapper 开发环境中的服务器没有运行。

这在 Brave 中发生，但在 Opera 中表现相同，并且似乎是一般的 Chromium 场景。我不使用 Firefox 或 Safari，但可能很快就会测试其中的一个，看看那里会发生什么行为。

这是一个剪辑，显示了我如何尝试取消注册 Service Worker。

https://youtu.be/Cb24I_fEklE

每当我从服务器获取数据时，我都使用 Sapper 构建项目时，预加载函数在 script context="module" 内声明，如下所示。

<script context="module">
  export async function preload(page) {
    return await this.fetch(`https://reqres.in/api/users?page=1`)
    .then(res1 => {
      return res1.json()
    }).then(res2 => {
      return { 
        notices: res2.data,
      }
    })
  }
</script>

根据文件

A <script> tag with a context="module" attribute runs once when the module first evaluates, rather than for each component instance. 

但是当模块第一次评估时是什么意思？

这是否意味着组件首次呈现时？那么和下面的代码一样在 onMount 生命周期方法中声明 api fetch 函数不一样吗？

<script>
  onMount(async() => {
    const res = await fetch(`https://reqres.in/api/users?page=1`);
    const json = await res.json();
  })
</script>

我在工兵模板中有一个带有分页的组件。目前，所有链接的行为都好像它们相对于根（localhost:3000/在本例中），无论 href 是否采用形式page或/page, （我什至尝试过./page。）

因此，对于我只想修改查询字符串的分页，我必须将当前视图的完整路径传递到 href 组件中，这有点痛苦。我做错了什么导致相对链接不起作用吗？（如果有一种方法可以让它们goto()直接调用，那就更好了，我有一个“转到页面：[x]”输入。）如果没有，是否有推荐的方法从组件内部获取当前路径，以便我可以抛出在分页组件中？

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

用户.svelte

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

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

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

您如何解决此类问题？

谢谢你。

我正在尝试在 Sapper 中实现名为with-route-as-modal 的next.js示例中所做的操作。

它的作用是，当单击链接时，新页面会显示在模式中，而不是替换当前页面，并且 URL 会更新，反映当前的模式页面。它在多个社交网络中实施，例如 Instagram。

在next.js示例中，它是通过使用动态 href 来完成的，如下所示：

<Link href={`/?postId=${id}`} as={`/post/${id}`}>

我如何在 Sapper 中实现它？

谢谢你的时间。

我正在使用 Svelte/Sapper 编写服务器端渲染应用程序，但在使用 Font Awesome 字体时遇到问题。

我使用以下命令来加载字体：

<script>
  import Icon from "svelte-awesome";
  import { faTimes } from "@fortawesome/free-solid-svg-icons/faTimes";
</script>

<Icon data={faTimes} />

我看到的错误是：“不是有效的 SSR 组件。您可能需要检查构建配置以确保依赖项已编译，而不是作为预编译模块导入”

有针对这个的解决方法吗？

我正在尝试让 Winston 日志库与我的 Sapper 应用程序一起使用。该 Sapper 应用程序使用 Rollup 作为模块捆绑器。为了实现我的应用程序，我基本上遵循了以下步骤：

启动使用 Rollup 的新 Sapper 项目：

npx degit "sveltejs/sapper-template#rollup" my-app\n

通过安装 Winstonnpm install winston并在文件中添加自定义记录器工厂src/_logging.js：

npx degit "sveltejs/sapper-template#rollup" my-app\n

通过工厂获取记录器并在服务器路由中使用记录器src/routes/blog/_posts.js：

import { createLogger, transports, format } from \'winston\';\n\nexport function createLabeledLogger(label) {\n  return createLogger({\n    level: \'debug\',\n    transports: [new transports.Console()],\n    format: format.combine(\n      format.label({ label: label, message: true }),\n      format.splat(),\n      format.padLevels(),\n      format.simple(),\n    )\n  });\n\n}\n

这就像一个魅力：

\xe2\x9c\x94 service worker (16ms)\ndebug:    [posts-server] …

尝试在我的工兵项目上安装 Mongoose 后出现此问题

util.js:157
    throw new ERR_INVALID_ARG_TYPE('superCtor', 'Function', superCtor);
    ^

TypeError [ERR_INVALID_ARG_TYPE]: The "superCtor" argument must be of type function. Received undefined
    at Object.inherits (util.js:157:11)
    at Object.<anonymous> (<project path>\__sapper__\dev\server\server.js:140600:8)
    at Module._compile (internal/modules/cjs/loader.js:1158:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1178:10)
    at Module.load (internal/modules/cjs/loader.js:1002:32)
    at Function.Module._load (internal/modules/cjs/loader.js:901:14)
    at Function.executeUserEntryPoint [as runMain] (internal/modules/run_main.js:74:12)
    at internal/main/run_main_module.js:18:47 {
  code: 'ERR_INVALID_ARG_TYPE'
}
> Server crashed

<project path> 只是我的项目路径

我有一个理论，这是由于将服务器代码捆绑/缩小到单个文件（__sapper__/dev/server.js）中引起的，但不确定如何修复它。

我的服务器汇总配置，如果有帮助的话：

util.js:157
    throw new ERR_INVALID_ARG_TYPE('superCtor', 'Function', superCtor);
    ^

TypeError [ERR_INVALID_ARG_TYPE]: The "superCtor" argument must be of type function. Received …

我最近才开始使用svelteand sapper，即使用户刷新页面，我也试图保留存储的会话。（我希望这可以做到）。

这个想法是用户可以登录，并作为经过身份验证的用户重定向到主页。但是当我在浏览器中点击刷新时，会话是空的，用户必须重新进行登录过程。

有任何想法吗？

到目前为止，我找不到解决方案。在此过程中涉及的一些文件下方。

server.js

import sirv from "sirv";
import polka from "polka";
import compression from "compression";
import * as sapper from "@sapper/server";
import bodyParser from "body-parser";
import session from "express-session";
import sessionFileStore from "session-file-store";

const { PORT, NODE_ENV } = process.env;
const dev = NODE_ENV === "development";
const FileStore = sessionFileStore(session);

polka()
  .use(
    bodyParser.json(),
    session({
      secret: "secret",
      resave: false,
      saveUninitialized: true,
      cookie: {
        maxAge: 31536000,
      },
      store: new FileStore({
        path: process.env.NOW ? `/tmp/sessions` : `.sessions`, …