Remix:在每次请求加载程序之前运行代码的中间件模式



Remix中是否有推荐的模式,用于在每个请求上运行公共代码,并可能向请求添加上下文数据?像中间件一样?例如,这方面的一个用例可能是进行日志记录或身份验证。

我看到的与此类似的一件事是通过getLoadContextAPI的加载程序上下文。这允许您填充一个context对象,该对象作为arg传递给所有路由加载器。

它确实有效,最初似乎是这样做的,但它的文档说。。。

这是一种弥合适配器的请求/响应API与您的Remix应用之间差距的方法

这个API是一个逃生通道,很少需要它

。。。这让我不这么想,因为

  • 此API明确用于与服务器运行时的自定义集成。但中间件似乎不应该是特定于服务器运行时的——它们应该只是作为Remix功能的"应用程序"级别的一部分。

  • 运行中间件是web框架中一种非常常见的模式!

那么,对于在每个加载程序之前运行的中间件,Remix有更好的模式吗?

您可以直接在加载器内部调用函数,而不是中间件,这也将更加明确。如果你想尽早从那些";中间件";混音让你抛出响应对象。

例如,如果你想检查用户是否有特定的角色,你可以创建这个功能:

async function verifyUserRole(request: Request, expectedRole: string) {
let user = await getAuthenticatedUser(request); // somehow get the user
if (user.role === expectedRole) return user;
throw json({ message: "Forbidden" }, { status: 403 });
}

在任何加载程序中都这样称呼它:

let loader: LoaderFunction = async ({ request }) => {
let user = await verifyUserRole(request, "admin");
// code here will only run if user is an admin
// and you'll also get the user object at the same time
};

另一个例子可能是需要HTTPS

function requireHTTPS(request: Request) {
let url = new URL(request.url);
if (url.protocol === "https:") return;
url.protocol = "https:";
throw redirect(url.toString());
}
let loader: LoaderFunction = async ({ request }) => {
await requireHTTPS(request);
// run your loader (or action) code here
};

Remix内部没有办法在加载程序之前运行代码

正如您所发现的,存在加载器上下文,但它甚至在remix开始执行其工作之前就运行了(例如,您不知道匹配了哪些路由模块(。

您也可以在JS文件中运行任意代码,然后在JS文件中将请求重新混合,您将使用部署到的平台的适配器(这取决于您使用的启动器。如果您选择了重新混合服务器作为服务器,则此文件不存在(

目前,它应该适用于一些用例,但我同意这是目前混音中缺少的功能。

app/root.tsx内部

export let loader: LoaderFunction = ({ request }) => {
const url = new URL(request.url);
const hostname = url.hostname;
const proto = request.headers.get("X-Forwarded-Proto") ?? url.protocol;
url.host =
request.headers.get("X-Forwarded-Host") ??
request.headers.get("host") ??
url.host;
url.protocol = "https:";
if (proto === "http" && hostname !== "localhost") {
return redirect(url.toString(), {
headers: {
"X-Forwarded-Proto": "https",
},
});
}
return {};
};

来源:https://github.com/remix-run/remix-jokes/blob/8f786d9d7fa7ea62203e87c1e0bdaa9bda3b28af/app/root.tsx#L25-L46

相关内容

最新更新