SvelteKit：如何使用 www-authenticate 标头保护页面答案

【问题标题】：SvelteKit: How to protect page with www-authenticate headerSvelteKit：如何使用 www-authenticate 标头保护页面
【发布时间】：2022-08-12 04:46:56
【问题描述】：

我正在尝试使用 svelte-kit 构建一个站点，该站点具有一个小的管理部分，只有具有用户名和密码的用户才能访问。我现在拥有的是一个管理页面admin.svelte 和一个页面端点admin.ts，当用户未登录时，它应该返回一个带有www-authenticate: basic 标头的401 状态，如下所示：

import type { RequestHandler } from \'@sveltejs/kit\';

export const get: RequestHandler = async () => {
    return {
        status: 401,
        headers: {
            \'www-authenticate\': \'Basic\'
        }
    };
};

但是当我打开/admin 时，浏览器登录提示并没有像我期望的那样显示身份验证标头。当我查看网络流量时，我可以看到页面请求具有正确的 401 状态，但响应标头中缺少身份验证标头。

与此相反，当我通过客户端路由从/ 导航到/admin 时，会显示浏览器登录提示。

如何让服务器呈现的页面包含身份验证标头并向我显示浏览器登录提示，就像在客户端导航之后一样？

你如何运行你的应用程序？
@MikkoOhtamaa 我用pnpm run dev
我对您如何在问题中运行应用程序一无所知。
@MikkoOhtamaa 你到底想知道什么？这是一个 Svelte Kit 站点，目前我正在使用内置 Web 服务器在本地运行它（通过 pnpm run dev）。对于适配器，我目前使用默认的 adapter-auto 并计划部署到 vercel
正是这个:) 开发服务器和 Vercel 是否都发生错误？因为它可能是某种网络服务器问题。

标签： svelte basic-authentication sveltekit

【解决方案1】：

import type { RequestEvent, RequestHandlerOutput } from "@sveltejs/kit";

export async function GET(req: RequestEvent): Promise<RequestHandlerOutput> {
    const isAdmin = checkIfAdmin(req);
    if (!isAdmin) {
        return {
            status: 401,
            headers: {
                "WWW-Authenticate": "Basic",
            },
        };
    }

    return { body: {} };
}

【讨论】：