拒绝访问 NextJS 中的目录答案

【问题标题】：Deny access to directory in NextJS拒绝访问 NextJS 中的目录
【发布时间】：2021-08-31 13:01:29
【问题描述】：

有没有办法拒绝访问 NextJS 中的目录？例如，如果我想禁止访问目录 /public/images ？

我会通过 api 路由来服务图像，所以图像在组件中看起来像这样：

<Image src="/api/image1" alt="Logo" width={720} height={160} />

和image1 api路由：

  res.setHeader('Content-Type', 'image/jpg');
  const imageBuffer2 = await (await fetch('http://example.com/images/logo.jpg')).body;
  res.send(imageBuffer2)

但用户将无法通过在浏览器中输入"example.com/images/logo.jpg" 来访问该图像。

我的目标是只为登录的用户提供图像。在 PHP 中类似的任务很容易，但是如何在 NextJS 中实现呢？

谢谢！

【问题讨论】：

标签： reactjs next.js vercel

【解决方案1】：

我不能肯定地告诉no，但我试图找到一些关于类似问题的信息。实际上，您无法从URL 访问除/pages 之外的任何文件夹，例如/public 文件夹。（您可以自己测试）。

在/pages 中，您不能拒绝对页面的访问，但您可以在您希望拒绝访问的页面上进行一些验证。

例子：

您想拒绝访问 /pages/adminInfo.tsx
您在页面呈现之前进行一些验证，例如在getStaticProps 或getServerSideProps 中，例如user 的角色为"admin"。
如果user 没有角色，您可以router.push("/404.js") 和重定向user，但无法访问“找不到页面”页面（或任何其他页面）
对于 api 路由，您执行与页面相同的条件。（如果触发页面前的条件）

附：您可以创建一个组件（验证您需要的条件）并将其添加到“安全页面” - 像这样您将保护一些信息

因此，对于图片，您只需if 即可检查用户是否已加载并将图片“上传”到页面。

【讨论】：

【解决方案2】：

我不确定是否可以实现纯 NextJS，但是，我们将 NextJS 与 express 一起使用，如下例所示，我保护 protected 文件夹中的任何文件，所以在您的情况下，您在发送请求之前检查用户身份验证

const express = require("express");
const next = require("next");
const app = next({dev: process.env.NODE_ENV !== "production"});
const handle = app.getRequestHandler();
const server = express();
app.prepare().then(()=>{
  server.get('/protected/*', (req, res) => {
    // write your protection logic here
    return res.status(401).send('Unauthenticated');
  })
  server.get("*", (req, res) => {
    return handle(req, res);
  });
  server.listen(3000, () => {
    console.log(`listening to port 3000`);
  });
})

【讨论】：