面试题：Next.js中如何设置静态资源的基础安全访问控制

服务器端配置：

Node.js 服务器（如使用 Express 作为 Next.js 中间件）：

安装 express：
```
npm install express
```

创建服务器文件（例如 server.js）：

const express = require('express');
const next = require('next');

const dev = process.env.NODE_ENV!== 'production';
const app = next({ dev });
const handle = app.getRequestHandler();

app.prepare().then(() => {
  const server = express();

  // 限制特定目录静态文件访问，假设限制`/private - static`目录
  server.get('/private - static/*', (req, res) => {
    // 这里可以进行身份验证等逻辑
    // 比如检查是否有特定的cookie或header
    const isAuthorized = false; // 示例，实际应替换为真实逻辑
    if (isAuthorized) {
      // 允许访问，可使用express - static等中间件来服务文件
      res.sendFile(__dirname + '/private - static' + req.url);
    } else {
      res.status(403).send('Forbidden');
    }
  });

  server.all('*', (req, res) => {
    return handle(req, res);
  });

  const port = process.env.PORT || 3000;
  server.listen(port, (err) => {
    if (err) throw err;
    console.log(`> Ready on http://localhost:${port}`);
  });
});

Next.js 配置：
- next.config.js：
  - 使用 assetPrefix 控制资源路径：如果需要在不同环境下改变静态资源的基础路径，可以设置 assetPrefix。例如，在生产环境中使用 CDN：
```
module.exports = {
  assetPrefix: process.env.NODE_ENV === 'production'? 'https://your - cdn - url' : ''
};
```
  - images 配置：对于图片资源，Next.js 提供了内置的优化。可以在 next.config.js 中配置图片加载的相关设置，并且也能间接地控制图片资源的访问。例如限制图片只能从特定的域名加载：
```
module.exports = {
  images: {
    domains: ['your - allowed - domain.com']
  }
};
```

身份验证与授权：

基于中间件的身份验证：

如上述 Express 服务器示例中，在处理静态文件请求时，可以添加身份验证逻辑。例如，基于 JWT（JSON Web Token）的身份验证：

安装 jsonwebtoken：
```
npm install jsonwebtoken
```

在服务器端代码中验证 JWT：

const jwt = require('jsonwebtoken');
server.get('/private - static/*', (req, res) => {
  const token = req.headers['authorization'];
  if (!token) {
    return res.status(403).send('Forbidden');
  }
  try {
    const decoded = jwt.verify(token, 'your - secret - key');
    // 验证通过，允许访问
    res.sendFile(__dirname + '/private - static' + req.url);
  } catch (err) {
    res.status(403).send('Forbidden');
  }
});

基于 Cookie 的身份验证：

可以在 Express 服务器中使用 cookie - parser 中间件来验证用户的登录状态（通过检查特定的 cookie）。
安装 cookie - parser：
```
npm install cookie - parser
```

在服务器端代码中使用：

const cookieParser = require('cookie - parser');
server.use(cookieParser());
server.get('/private - static/*', (req, res) => {
  const isLoggedIn = req.cookies['your - login - cookie'];
  if (isLoggedIn) {
    res.sendFile(__dirname + '/private - static' + req.url);
  } else {
    res.status(403).send('Forbidden');
  }
});

星途面试题库

面试题：Next.js中如何设置静态资源的基础安全访问控制

知识考点

面试题答案