从网页更新GitHub仓库CSV文件时的认证问题：Token与SHA

一、先解决Token被吊销的核心问题 #

你的Token每次被移除，大概率是因为直接把Token写在了前端JS代码里——前端代码完全公开，任何人都能扒到你的Token，GitHub的安全机制检测到这种暴露行为后会自动吊销授权。这是红线，绝对不能这么做。

正确的Token使用方式：

• 把Token存在后端服务的环境变量里，绝对不要在前端代码中出现
• 确认你的Personal Access Token（PAT）勾选了完整的repo权限（私有仓库必须选，公有仓库也建议选全repo权限，只选contents可能会有操作权限不足的问题）
• 检查Token是否过期：如果设置了过期时间，去GitHub账号的「Settings > Developer settings > Personal access tokens」页面重新生成

二、SHA值的正确使用姿势 #

更新GitHub仓库文件必须携带目标文件的最新SHA值，否则会返回409冲突错误，步骤不能错：

1. 每次更新前，先调用GitHub API获取当前CSV文件的最新信息，提取返回结果里的sha字段
2. 用这个最新SHA值、新的文件内容、Token一起发起更新请求
3. 绝对不能缓存SHA值，每次操作都要重新获取，避免因为文件已被其他操作修改导致失败

三、推荐方案：后端中转实现安全更新 #

前端直接操作GitHub API完全不可行，必须加一个后端服务做中转，下面是具体实现示例：

Node.js后端示例（Express框架） #

const express = require('express');
const axios = require('axios');
const app = express();
app.use(express.json());

// 从环境变量读取敏感信息，绝对不要硬编码
const GITHUB_TOKEN = process.env.GITHUB_TOKEN;
const REPO_OWNER = '你的GitHub用户名';
const REPO_NAME = '目标仓库名';
const FILE_PATH = '要更新的CSV文件路径（比如data.csv）';

// 处理前端表单提交的接口
app.post('/update-csv', async (req, res) => {
  try {
    // 1. 获取当前CSV文件的最新SHA和内容
    const fileInfoRes = await axios.get(
      `https://api.github.com/repos/${REPO_OWNER}/${REPO_NAME}/contents/${FILE_PATH}`,
      { headers: { Authorization: `token ${GITHUB_TOKEN}` } }
    );
    const currentSha = fileInfoRes.data.sha;
    const currentCsvContent = Buffer.from(fileInfoRes.data.content, 'base64').toString();

    // 2. 拼接新的表单数据到CSV（这里假设表单字段是name和email，按需调整）
    const newFormData = `${req.body.name},${req.body.email}\n`;
    const newCsvContent = currentCsvContent + newFormData;
    const encodedContent = Buffer.from(newCsvContent).toString('base64');

    // 3. 发起更新请求
    await axios.put(
      `https://api.github.com/repos/${REPO_OWNER}/${REPO_NAME}/contents/${FILE_PATH}`,
      {
        message: '新增表单提交数据',
        content: encodedContent,
        sha: currentSha
      },
      { headers: { Authorization: `token ${GITHUB_TOKEN}` } }
    );

    res.status(200).json({ success: true, msg: 'CSV更新成功' });
  } catch (err) {
    console.error(err);
    res.status(500).json({ 
      success: false, 
      msg: '更新失败', 
      error: err.response?.data?.message || err.message 
    });
  }
});

app.listen(3000, () => console.log('后端服务运行在3000端口'));

前端表单提交示例 #

document.getElementById('submit-btn').addEventListener('click', async () => {
  const name = document.getElementById('name-input').value;
  const email = document.getElementById('email-input').value;

  const response = await fetch('http://localhost:3000/update-csv', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({ name, email })
  });

  const result = await response.json();
  alert(result.msg);
});

四、其他替代方案 #

如果不想自己搭建后端，可以用Serverless函数简化：

• 用Vercel、Netlify的Serverless Functions，把上面的后端逻辑写成无服务器函数，Token存在平台的环境变量里
• 低频更新场景下，可以用GitHub Actions配合Issue：前端提交数据到仓库Issue，再用Actions定时把Issue中的数据同步到CSV文件

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