Vue.js构建Cloud Storage断点续传上传器：浏览器JS获取Access Token方法

我之前也碰到过类似的场景——直接在浏览器端对接GCS做断点续传，确实绕不开Access Token的问题。Google Cloud的官方Node.js库没法直接在浏览器用，不过有几个可行的方案，我给你梳理一下：

方案1：用Google Identity Services（GIS）获取用户授权的Token #

这个方案适合需要用户用自己的Google账号上传文件的场景，核心是让用户授权你的应用访问指定的GCS资源：

1. 先在页面引入GIS的客户端脚本：

<script src="https://accounts.google.com/gsi/client"></script>

2. 在你的Vue组件里初始化授权流程，指定GCS所需的权限范围（比如读写权限）：

export default {
  data() {
    return {
      accessToken: ''
    }
  },
  mounted() {
    // 初始化GIS客户端
    window.google.accounts.oauth2.initTokenClient({
      client_id: '你的Google Cloud OAuth客户端ID',
      scope: 'https://www.googleapis.com/auth/devstorage.read_write',
      callback: (tokenResponse) => {
        if (tokenResponse.error !== undefined) {
          throw tokenResponse;
        }
        // 这里拿到的tokenResponse.access_token就是你需要的Access Token
        this.accessToken = tokenResponse.access_token;
        // 接下来就可以用这个Token请求GCS的断点续传Session URL了
      },
    });
  },
  methods: {
    triggerAuth() {
      // 触发用户授权弹窗
      window.google.accounts.oauth2.getTokenClient().requestAccessToken({prompt: 'consent'});
    }
  }
}

注意：你需要先在Google Cloud控制台创建OAuth 2.0客户端ID，配置允许的JavaScript来源（就是你的前端域名），否则会触发跨域报错。

方案2：后端生成短期授权凭证（更安全的生产级方案） #

虽然你说不想用中间件，但直接在浏览器端处理长期密钥风险极高——一旦泄露，别人就能完全控制你的GCS资源。更稳妥的方式是用后端生成短期的Access Token或者直接生成断点续传的Session URL，前端只需要请求后端拿到这个凭证即可：

后端示例（Node.js）： #

用Google Cloud的Node.js SDK生成短期的Access Token（基于Service Account）：

const {GoogleAuth} = require('google-auth-library');
const auth = new GoogleAuth({
  scopes: ['https://www.googleapis.com/auth/devstorage.read_write'],
});

// 生成有效期15分钟的Access Token
async function generateShortLivedToken() {
  const client = await auth.getClient();
  const token = await client.getAccessToken();
  return token.token;
}

// 或者直接生成断点续传的Session URL
async function generateResumableUploadUrl(bucketName, fileName) {
  const {Storage} = require('@google-cloud/storage');
  const storage = new Storage();
  const file = storage.bucket(bucketName).file(fileName);
  
  const [response] = await file.createResumableUpload();
  return response.resumableUrl;
}

前端Vue里的调用： #

async getUploadSessionUrl() {
  const res = await fetch('/api/generate-resumable-url', {
    method: 'POST',
    headers: {'Content-Type': 'application/json'},
    body: JSON.stringify({bucket: '你的bucket名', fileName: '要上传的文件名'})
  });
  const data = await res.json();
  // 拿到sessionUrl后直接用它做断点续传，不需要自己处理Token
  this.resumableUrl = data.resumableUrl;
}

这个方案的好处是完全避免了前端接触敏感密钥，而且可以在后端严格控制权限（比如只允许上传到特定目录、限制文件大小/类型）。

方案3：用Firebase Storage简化流程 #

如果你的项目可以兼容Firebase，那这是最省心的方式——Firebase Storage本质是封装了GCS，并且提供了完整的浏览器端SDK，内置支持断点续传，不需要自己手动处理Token：

1. 先在Vue项目里安装Firebase SDK：

npm install firebase

2. 初始化Firebase并实现上传：

import { initializeApp } from "firebase/app";
import { getStorage, ref, uploadBytesResumable } from "firebase/storage";

const firebaseConfig = {
  // 你的Firebase配置
};

const app = initializeApp(firebaseConfig);
const storage = getStorage(app);

export default {
  methods: {
    startUpload(file) {
      const storageRef = ref(storage, `uploads/${file.name}`);
      const uploadTask = uploadBytesResumable(storageRef, file);
      
      // 监听上传进度、完成、错误事件
      uploadTask.on('state_changed', 
        (snapshot) => {
          const progress = (snapshot.bytesTransferred / snapshot.totalBytes) * 100;
          console.log(`上传进度：${progress}%`);
        }, 
        (error) => {
          console.error('上传失败：', error);
        }, 
        () => {
          console.log('上传完成');
        }
      );
    }
  }
}

Firebase会自动处理身份验证（比如用Firebase Auth让用户登录）和Token管理，断点续传也是SDK内置的，几乎不需要自己写额外的逻辑。

关键安全提醒 #

• 绝对不要在浏览器代码里硬编码Google Cloud Service Account的密钥，一旦泄露后果严重。
• 所有短期凭证（Token或Session URL）都要设置尽可能短的有效期（比如15分钟），并且限制其权限范围。

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