标签: sveltekit

每当我尝试运行时，我都会尝试在铁路中部署我的 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
  }
};

如果我有一个定义了一些基本颜色和字体等的全局 CSS 文件，并将其包含在我的顶级布局文件中import "$lib/assets/app.css"，那么我如何从该 css 文件中引用本地字体和图像，它们也是在文件夹中/lib/assets？目前看来我必须将这些文件放入/static，但这会在创建构建时产生警告，更重要的是，它们在浏览器中仅缓存 4 小时。

举个例子，我的$lib/assets/app.css文件中有这样的内容：

@font-face {
  font-family: "Custom";
  src: url("/fonts/Bitter-Regular.ttf");
  font-display: swap;
}

当该字体放置在/static文件夹中时效果很好，但我宁愿将其放置在文件夹中$lib/assets，因为这可能意味着它成为不可变构建的一部分并且缓存的时间更长。

我目前正在使用 Tauri、SvelteKit 和 Tailwind 开发桌面应用程序。当我运行应用程序的开发版本时，我经常收到以下错误：

    [vite] Internal server error: [postcss] /home//src/routes/test/[mode]/+page.svelte?svelte&type=style&lang.css:2:11: Unknown word
  Plugin: vite:css
  File: /home/myProj/src/routes/test/[mode]/+page.svelte?svelte&type=style&lang.css:2:11
  1  |  <script lang="ts">
  2  |          import { appWindow, LogicalSize } from '@tauri-apps/api/window';
     |             ^
  3  |          appWindow.setSize(new LogicalSize(700, 404));
  4  |          import { rand } from '$lib/math';
      at Input.error (/home/myProj/node_modules/.pnpm/postcss@8.4.21/node_modules/postcss/lib/input.js:148:16)
      at Parser.unknownWord (/home/myProj/node_modules/.pnpm/postcss@8.4.21/node_modules/postcss/lib/parser.js:540:22)
      at Parser.other (/home/myProj/node_modules/.pnpm/postcss@8.4.21/node_modules/postcss/lib/parser.js:164:12)
      at Parser.parse (/home/myProj/node_modules/.pnpm/postcss@8.4.21/node_modules/postcss/lib/parser.js:72:16)
      at parse (/home/myProj/node_modules/.pnpm/postcss@8.4.21/node_modules/postcss/lib/parse.js:11:12)
      at new LazyResult (/home/myProj/node_modules/.pnpm/postcss@8.4.21/node_modules/postcss/lib/lazy-result.js:133:16)
      at Processor.process (/home/myProj/node_modules/.pnpm/postcss@8.4.21/node_modules/postcss/lib/processor.js:28:14)
      at compileCSS (file:///home/myProj/node_modules/.pnpm/vite@4.2.1/node_modules/vite/dist/node/chunks/dep-79892de8.js:38356:14)
      at async TransformContext.transform (file:///home/myProj/node_modules/.pnpm/vite@4.2.1/node_modules/vite/dist/node/chunks/dep-79892de8.js:37810:56)
      at async Object.transform (file:///home/myProj/node_modules/.pnpm/vite@4.2.1/node_modules/vite/dist/node/chunks/dep-79892de8.js:43387:30)

如果我重新加载浏览器窗口或保存文件并热重载，则错误就会消失。此外，当我启动应用程序时，该错误并不总是发生。我想说大约 70% …

我目前正在使用 svelte 的上下文 api 在我的应用程序中传递用户数据。突然我遇到了这个错误，在我能找到的任何地方几乎没有任何文档。错误信息如下。Missing "./types/runtime/internal/lifecycle" specifier in "svelte" package。从我还将发布的完整控制台输出来看，它来自这里的这个文件：

<script lang="ts">
    import { getContext } from 'svelte';
    import HtmlGenerator from './generate_html';
    import type { Field } from './generate_html';
    import { setContext } from 'svelte/types/runtime/internal/lifecycle';
    import { UserContext } from '../../context';

    setContext('UserContext', UserContext);

    const { is_logged_in, user } = getContext('UserContext');
</script>

为了简单起见，我省略了不相关的代码。直到我尝试使用 context Api 时才开始收到此错误。这是完整的控制台输出：

Internal server error: Missing "./types/runtime/internal/lifecycle" specifier in "svelte" package
  Plugin: vite:import-analysis
  File: C:/javascript_projects/svelte_projects/reactable/src/routes/dashboard/form-builder/+page.svelte
      at e (file:///C:/javascript_projects/svelte_projects/reactable/node_modules/vite/dist/node/chunks/dep-24daf00c.js:16638:25)
      at n (file:///C:/javascript_projects/svelte_projects/reactable/node_modules/vite/dist/node/chunks/dep-24daf00c.js:16638:627)
      at o (file:///C:/javascript_projects/svelte_projects/reactable/node_modules/vite/dist/node/chunks/dep-24daf00c.js:16638:1297)
      at …

我正在将 Supabase 用于新的 Sveltekit 应用程序，使用此模板

目前，我正在客户端传递 Supabase 密钥，如下所示：

const supabase = createClient(
  import.meta.env.VITE_SUPABASE_URL,
  import.meta.env.VITE_SUPABASE_ANON_KEY
)

我可以创建安全后端/API 的最简单方法是什么，以便应用程序可以从 Supabase 获取内容，而无需在客户端显示 Supabase 密钥？

Sveltekit 中是否有任何功能可以让我做到这一点？或者我是否需要集成像 Rails 这样的后端？

我正在尝试通过加载函数在 SvelteKit 页面中进行 API 调用，但我不想用本地端点代理这些调用，因为我想让 Web 服务器尽可能轻巧。

我特别想做的是，当从服务器调用时，API 的 URL 应该与从客户端调用时不同（例如“http://localhost:1234”与“https://example.js”）。 com:1234"，分别）。

但是，比这更普遍的是，有没有办法区分当前代码是在服务器上还是在客户端上运行？

在 sveltekit 的上下文中，我需要一些帮助来理解 SSR。我注意到该load方法在服务器和客户端上都被调用，我无法解决这个问题。我想它需要初始化客户端组件的状态，但为什么不将 SSR 产生的 props 传递给客户端呢？

如果在 SSR 期间需要做数据库请求怎么办？现在从客户端重复相同的数据库请求？如果这甚至不可能怎么办？我知道我可以使用browserfrom$app/env在服务器和浏览器上运行不同的代码，但我返回什么道具？有没有办法将数据从服务器端调用load传递到客户端调用？