如何实现页面刷新后Google Drive API授权状态持久化

你遇到的重复授权问题，根源是官方快速入门示例默认使用内存级的授权状态存储，页面刷新后内存数据清空，自然需要重新走授权流程。按下面的步骤改代码就能同时实现授权持久化、授权逻辑和文件拉取逻辑拆分的需求：

具体修改步骤 #

• 第一步：调整客户端初始化配置，开启SDK自带的持久化存储能力
  Google的JS SDK本身已经做了跨刷新的授权存储能力，只要在初始化时补全配置就会自动生效，不需要你手动往localStorage/cookie里存token。
  把你原来的initClient方法替换成下面的实现：

let GoogleAuth; // 全局存授权实例，方便其他方法调用
function initClient() {
  gapi.client.init({
    apiKey: '你已经配置好的API_KEY',
    clientId: '你已经配置好的CLIENT_ID',
    discoveryDocs: ["https://www.googleapis.com/discovery/v1/apis/drive/v3/rest"],
    scope: 'https://www.googleapis.com/auth/drive.metadata.readonly',
    // 以下2个是实现持久化的核心配置
    cookie_policy: 'single_host_origin', // 允许SDK在当前域名下写入授权cookie做持久化
    access_type: 'online' // 普通前端场景用online即可，需要超长期免授权再改成offline
  }).then(() => {
    GoogleAuth = gapi.auth2.getAuthInstance();
    // 监听授权状态变化，自动更新按钮状态
    GoogleAuth.isSignedIn.listen(updateSigninStatus);
    // 页面加载时直接读取本地已存的授权状态，不需要用户手动点授权
    updateSigninStatus(GoogleAuth.isSignedIn.get());
    // 绑定按钮事件
    document.querySelector('#authorize_button').addEventListener('click', handleAuthClick);
    // 你要新增的独立拉取文件按钮，初始状态禁用
    document.querySelector('#list_files_button').addEventListener('click', listFiles);
    document.querySelector('#list_files_button').disabled = true;
  });
}

• 第二步：拆分授权逻辑和业务逻辑，不要在授权回调里硬绑listFiles调用
  单独写状态更新方法，只负责根据授权状态切换按钮可用性，不执行业务逻辑：

function updateSigninStatus(isSignedIn) {
  const authBtn = document.querySelector('#authorize_button');
  const listBtn = document.querySelector('#list_files_button');
  if (isSignedIn) {
    authBtn.textContent = '退出登录';
    listBtn.disabled = false; // 授权完成后才允许点拉取文件按钮
  } else {
    authBtn.textContent = '授权';
    listBtn.disabled = true; // 未授权时禁用拉取按钮
  }
}

重写授权按钮点击逻辑，只处理授权/登出操作：

function handleAuthClick() {
  if (GoogleAuth.isSignedIn.get()) {
    // 当前已授权就执行登出，清除本地存储的授权信息
    GoogleAuth.signOut();
  } else {
    // 未授权就弹出授权窗口
    GoogleAuth.signIn();
  }
}

listFiles方法保持独立，只在用户点击对应按钮时触发，你原来的文件拉取和渲染逻辑不需要改动：

function listFiles() {
  gapi.client.drive.files.list({
    pageSize: 10,
    fields: 'nextPageToken, files(id, name)'
  }).then(res => {
    // 你原来的文件列表渲染逻辑放这里
    console.log(res.result.files);
  })
}

补充说明 #

• 以上配置实现的持久化是同浏览器同域名下生效的，用户手动清除浏览器cookie、点击退出登录、换设备/浏览器访问时需要重新授权，属于正常的安全机制
• 如果需要用户关闭浏览器数周后再打开仍然不需要重新授权，把初始化参数里的access_type改成offline，第一次授权时SDK会返回refresh_token，你可以自行存储后在access_token过期时自动换新，不需要弹出授权窗口
• 生产环境如果用offline模式，不要把refresh_token明文存在前端localStorage，建议存在自己的服务端做中转，避免token泄露

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