FileSystem Access API权限请求报错：需用户激活权限

权限报错原因与修复 #

你遇到的报错：

Failed to execute 'requestPermission' on 'FileSystemHandle': User activation is required to request permissions

核心原因是浏览器的安全限制：requestPermission必须在用户主动交互的上下文中调用（比如按钮点击、键盘按下等事件回调）。你的代码在for await循环里调用verifyPermission时，已经脱离了用户激活的上下文，所以触发了这个错误。

修复方案 #

把权限请求逻辑移到用户主动触发的事件（比如“开始批量修改”按钮的点击事件）中，先完成所有文件的权限验证/请求，再执行批量保存：

// 绑定用户触发的事件（比如按钮点击）
document.getElementById('batch-save-btn').addEventListener('click', async () => {
  // 先拿到所有需要处理的文件句柄数组
  const targetFileHandles = [...]; // 你的FileSystemFileHandle实例数组

  // 提前批量验证/请求所有文件的读写权限
  const permissionStatusList = await Promise.all(
    targetFileHandles.map(handle => this.verifyPermission(handle, true))
  );

  // 检查是否所有权限都已获取
  if (!permissionStatusList.every(status => status)) {
    alert('部分文件未授权，无法完成批量修改');
    return;
  }

  // 权限全部通过后，执行批量保存逻辑
  for await (let res of promises) {
    let { fileObject, arrayBuffer } = res;
    const stream = await fileObject.handler.createWritable();
    await stream.write(contents);
    await stream.close();
  }
});

// 保留你的verifyPermission方法
async verifyPermission(fileHandle, withWrite) {
  const opts = withWrite ? { mode: "readwrite" } : {};

  if ((await fileHandle.queryPermission(opts)) === "granted") {
    return true;
  }

  // 此时requestPermission处于用户交互上下文，符合安全要求
  if ((await fileHandle.requestPermission(opts)) === "granted") {
    return true;
  }

  return false;
}

权限请求时机说明 #

• 不需要为每个文件单独请求权限，但必须在用户主动交互的上下文里统一处理所有文件的权限验证/请求。
• 优先在循环开始前一次性完成权限操作：既符合浏览器安全限制，也避免多次弹出权限对话框骚扰用户。如果后续文件操作间隔过长（超出用户激活有效期），可能需要重新验证，但批量修改场景下一次处理即可满足需求。

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