NuxtJS通用应用中如何运行NodeJS代码生成ImageKit上传所需签名？

第一个问题：不要把代码放在/modules目录 #

/modules下的代码仅在Nuxt应用启动/构建阶段执行一次，而ImageKit的签名参数自带过期时间，启动时一次性生成的参数后续用户上传时早就失效了，完全满足不了业务需求。另外你的ImageKit私钥绝对不能暴露到客户端侧，所有涉及私钥的逻辑必须跑在服务端。

正确实现思路：搭建服务端API接口动态生成签名 #

你不需要自定义Nuxt钩子，直接用Nuxt内置的服务端能力写接口即可，具体步骤如下：

1. 前置准备 #

先安装ImageKit官方依赖：

npm install imagekit

在项目根目录新建.env文件，存储敏感配置（记得把.env加入.gitignore避免密钥泄露）：

IMAGEKIT_PUBLIC_KEY=你的公钥
IMAGEKIT_PRIVATE_KEY=你的私钥
IMAGEKIT_URL_ENDPOINT=你的urlEndpoint

2. 编写服务端接口 #

如果你用的是Nuxt3

在项目/server/routes目录下新建api/imagekit-auth.get.js（TS写法同理）：

import ImageKit from 'imagekit'

export default defineEventHandler(async (event) => {
  // 初始化ImageKit实例，仅调用服务端环境变量，私钥不会暴露到客户端
  const imagekit = new ImageKit({
    publicKey: process.env.IMAGEKIT_PUBLIC_KEY,
    privateKey: process.env.IMAGEKIT_PRIVATE_KEY,
    urlEndpoint: process.env.IMAGEKIT_URL_ENDPOINT
  })
  // 生成认证参数直接返回
  return imagekit.getAuthenticationParameters()
})

启动服务后直接请求/api/imagekit-auth就能拿到你需要的JSON格式响应。

如果你用的是Nuxt2

第一步在项目根目录新建/serverMiddleware/imagekit-auth.js：

const ImageKit = require('imagekit')

module.exports = function (req, res, next) {
  if (req.method === 'GET' && req.path === '/api/imagekit-auth') {
    const imagekit = new ImageKit({
      publicKey: process.env.IMAGEKIT_PUBLIC_KEY,
      privateKey: process.env.IMAGEKIT_PRIVATE_KEY,
      urlEndpoint: process.env.IMAGEKIT_URL_ENDPOINT
    })
    const authParams = imagekit.getAuthenticationParameters()
    res.setHeader('Content-Type', 'application/json')
    res.end(JSON.stringify(authParams))
  } else {
    next()
  }
}

第二步在nuxt.config.js里注册这个中间件：

export default {
  serverMiddleware: [
    '~/serverMiddleware/imagekit-auth'
  ]
}

3. 客户端调用逻辑 #

用户每次触发上传操作前，先请求/api/imagekit-auth接口拿到最新的签名参数，再带着参数调用ImageKit客户端上传接口即可。

注意事项 #

• 所有用到IMAGEKIT_PRIVATE_KEY的代码只能放在服务端目录下，绝对不要写到客户端页面、组件代码中，避免密钥泄露
• 不要长时间缓存签名参数，建议每次上传前都重新请求，避免过期导致上传失败
• 可以根据业务需要给这个接口加权限校验，比如仅允许登录用户调用，避免接口被恶意滥用

内容的提问来源于stack exchange，提问作者redshift