标签: sveltekit

2022 年 7 月 20 日 由 npm init svelte@next 创建的新 Sveltekit 项目。今天之前，所有 sveltekit 项目都在 localhost:3000 上以开发模式运行。当前项目在 localhost:5173 上运行，这使得它变得困难，因为 supabase 默认返回对 localhost:3000 的响应。我尝试更改 package.json，如https://www.cloudhadoop.com/svelte-change-port/所示 ，但没有成功。我尝试更改 Vite 服务器选项，如https://main.vitejs.dev/config/server-options.html#server-host中 所示，但这也不起作用。有没有人有一种万无一失的简单方法可以在 localhost:3000 上获取新的 Sveltekit 项目？非常感谢

我正在尝试让这个 fetch 方法在 Svelte 中工作

当 page.svelte 调用函数来获取数据时，在控制台中我收到此消息

[HTTP/1.1 405 Method Not Allowed 19ms]

我已经缩小到这个范围

POST method not allowed

我需要在配置文件中设置一个变量还是有另一个我缺少的解决方案？

// svelte.config.js

import adapter from '@sveltejs/adapter-auto';

const config = {
    kit: {
        adapter: adapter(),
        methodOverride: {
            allowed: ['POST']
        },
    }
};

export default config;

这两个文件都位于 Routes 文件夹中

// 获取数据.js

export const POST = async(data) => {
  const response = // get data function here
  return {
    body: {
        data: response
    }
  }
}

// page.svelte

async function fetchData() {
   const …

在开发环境中是否可以使用 https 运行 SvelteKit 应用程序？\n我尝试运行

npm run dev -- --https  \n

vite启动服务器成功：

VITE v3.0.2  ready in 359 ms\n\n  \xe2\x9e\x9c  Local:   https://localhost:5173/\n  \xe2\x9e\x9c  Network: [...] \n

但我无法连接到 https://localhost:5173\nchrome 说：ERR_SSL_VERSION_OR_CIPHER_MISMATCH

我还尝试编辑 vite.config.js 添加我的证书：

https: {\n    key: readFileSync( `${__dirname}/../server/key.pem`),\n    cert: readFileSync(`${__dirname}/../server/cert.pem`),\n}\n

我还尝试在这篇文章之后使用 mkcert() ：

在本地主机上访问 https

但它会导致同样的错误

然后我尝试使用 mkcert 作为插件：

const config = {\n    \n    server: {       \n        https: true\n    },\n\n    plugins: [sveltekit(), mkcert()],\n\n}; \n

这次，在第一次加载时，它似乎可以工作，但是使用 SvelteKit goto() 加载其他页面会导致以下不同的错误：

TypeError …

我正在尝试将 sveltekit 应用程序从旧版本迁移到最新版本。会话已从 $app/stores 中删除。

我无法在当前文档中找到对新会话的引用。

我在 +layout.svelte 中使用此参考

    <script lang="ts">
        import { session } from '$app/stores';
    </script>

并从 hooks.ts 调用 GetSession：

    import type { GetSession, Handle } from '@sveltejs/kit';

引用它们的新方式是什么？

本.

如果我在 /routes 有一个主布局“+layout.svelte”，然后尝试在 /routes/auth/login 重置布局，它不起作用。

• 如果名称是“+layout.svelte”，则布局将嵌入主布局内。
• 如果名称是“+layout@.svelte”，则它不起作用。
• 如果名称是“+layout.reset.svelte”，则其： 错误：以 + 为前缀的文件被保留。

因为svelte/kit的默认配置是vite。我认为他们改变了它，但我不知道该怎么做。

我在文档中只能找到有关重置布局的内容。

位于：kit.svelte.dev/docs/advanced-routing#advanced-layouts-layout

使用 SvelteKit 时，必须始终在/store路径中创建，否则会出现刷新后状态保持最新的问题。 您无法在导入的模块中创建 ，因为服务器端模块仅加载一次，这会导致. 所有这些都导致了类型的某种情况。pagelayout
storestore

问题：

我创建商店并将其从 传递+page.svelte到Child.svelte，通过setContext：

<!-- +page.svelte -->
<script>
  import Child from "./Child.svelte";
  import { writable } from 'svelte/store';
  import { setContext } from "svelte";
  
  function createCount() {
    /** @type {import("svelte/store").Writable<number>} */
    const { subscribe, set, update } = writable(0);
    
    return {
      subscribe,
      increment: () => update(n => n + 1),
      decrement: () => update(n => n - 1),
      reset: () => set(0)
    }; …

每当我尝试运行时，我都会尝试在铁路中部署我的 Sveltekit 应用程序

docker run --publish 8000:8000 my_project

我回来了

> my-project@0.0.1 build
> vite build

sh: vite: not found

这是我的 dockerfile

# syntax=docker/dockerfile:1

FROM node:19.4.0-alpine3.16
ENV NODE_ENV=production

WORKDIR /app

COPY ["package.json", "package-lock.json*", "./"]

RUN npm install 
RUN npm install dotenv 
RUN npm install @directus/sdk
RUN npm install vite

COPY . .

CMD [ "npm", "run", "build" ]

这是我的 package.json 文件

"scripts": {
            "dev": "vite dev",
            "build": "vite build",
            "preview": "vite preview",
            "check": "svelte-kit sync && svelte-check --tsconfig ./jsconfig.json",
            "check:watch": "svelte-kit …

由于目前没有适用于 SvelteKit 的 Auth0 SDK，因此当我打算将 Auth0 合并到我的 SvelteKit 应用程序中（包括服务器端身份验证）时，我正在学习（或至少尝试学习）有关身份验证的知识，这比我最初的意图要多得多。该文档有点令人困惑（或者可能它只是很大，或者可能我只是不那么聪明），所以我希望在这里描述我的身份验证流程以供批评（希望这对将来的其他人有帮助） ）。

我已经阅读了这篇关于 SPA auth以及Auth0 教育产品的精彩文章。但我仍然不确定我是否正确地将这些点连接起来。这是我的流程。所有这一切仅通过 SSL 发生。

\n
1. 我使用他们的客户端 SDK ( @auth0/auth0-spa-js )在客户端创建一个 Auth0 客户端。该客户端通过 Auth0 弹出窗口执行身份验证。
\n
2. 一旦通过身份验证，一切都会在客户端按预期运行。但如果我想在服务器端控制对路由的访问，我需要将信息返回到服务器。所以...
\n
3. 身份验证后，Auth0 创建一个 ID 令牌（签名的 JWT），该令牌存储在浏览器的本地存储中。我将其保存为会话 cookie（SameSite=strict; HTTPOnly; Secure;设置了选项），以便它通过路由授权请求传递回服务器。
\n

所以让我在这里暂停一下...我明白（至少根据一些内容，包括上面链接的 Auth0 教育视频）ID 令牌不应该用于身份验证，并且永远不应该被传递。这就是访问令牌的用途。然而，在这种情况下，交换都是第一方（我的客户端，我的服务器），我的理解是“可以”。

然而，Auth0 SDK 本身并没有设置 cookie，这确实让我感到紧张。这让我怀疑我是否做错了\xe2\x84\xa2。

\n

4. 在服务器上，我使用公钥验证 id_token，然后可以根据需要在后端保存用户详细信息等，并允许访问适当的路由（hooks.server.js在我的 SvelteKit 应用程序中通过）。

   \n
\n

5. 当用户注销或令牌过期时，cookie 将被删除。

   \n
\n

（顺便说一句，我还没有弄清楚如何在 ID 令牌过期时刷新它，因为 Auth0 客户端 SDK 似乎永远不会更新浏览器存储中的 ID 令牌，即使它已过期。）

我有一个前端 javascript (svelte) 和一个 go 后端 API。前端调用go后端URL从github生成OAuth2令牌。后端使用精心设计的 url 作为响应进行回复）

https://github.com/login/oauth/authorize?access_type=online&client_id=xxxxxxx&redirect_uri=http%3A%2F%2Flocalhost%3A8080%2Fapi%2Fv1%2Fcallback&response_type=code&scope=user%3Aemail&state=state

该 url 由用户打开location.assign(authUrl);

实际的完整代码：

const authUrl = await fetch('http://localhost:8080/api/v1/authurl', {
  method: 'GET',
  headers: {
                'Content-Type': 'application/json'
            }
        }).then(res => res.json()).then(data => data.url);

// Redirect the user to the GitHub authorization URL
location.assign(authUrl);

然后后端处理回调，然后执行交换并接收有效的 OAuth2 令牌（耶！）

从这里我需要通知客户交易已完成，但我不确定如何做到这一点（这是我坦白承认我在前端很糟糕并且没有太多经验的地方）。我决定向前端返回一个 httponly 会话 cookie，并将 GitHub OAuth2 令牌安全地存储在后端，但我应该如何将此令牌获取到前端以便它可以存储它？

请记住，没有从客户端获取数据，后端 API 通过回调启动。

我能做的一件事就是重定向；

cookie := &http.Cookie{
            Name:     "token",
            Value:    jwt_token,
            MaxAge:   3600,
            Path:     "/",
            Domain:   "localhost",
            Secure:   false,
            HttpOnly: true,
}
c.SetCookie(cookie.Name, cookie.Value, cookie.MaxAge, cookie.Path, cookie.Domain, …

父级的+laytout.server.ts数据可以通过来自 load 函数的 throwparent() 方法获取。（文档中描述）

问题：是否可以在表单操作 中访问该数据？

// src/routes/account/+page.server.js

/** @type {import('./$types').PageServerLoad} */
export async function load({parent}) {
  const {IMPORTANT_DATA} = await parent()

  return {
    IMPORTANT_DATA
  };
}
 
/** @type {import('./$types').Actions} */
export const actions = {
  logout: async (event) => {
    // I would like to access IMPORTANT_DATA here
  }
};