如何让File System Access API的showDirectoryPicker存到IndexedDB后不重复申请权限

问题根因 #

你的代码存在三处核心问题：

1. 逻辑流程错误：当前代码无论IndexedDB中是否存储了有效目录句柄，都会直接调用showDirectoryPicker()，必然会每次弹出选择窗口触发权限申请，没有用到本地存储的句柄。
2. 缺少权限校验步骤：从IndexedDB读取到已保存的句柄后，需要主动调用权限查询/申请接口激活历史授权，刷新后浏览器不会自动恢复句柄的可用状态。
3. 基础语法错误：函数定义的asyn为拼写错误，正确写法是async。

修复方案 #

1. 封装权限校验工具方法

// 校验目录句柄的权限，mode可选read/readwrite，按需传入
async function verifyPermission(dirHandle, mode = 'read') {
  const permissionOpts = { mode }
  // 先查询已有权限
  if (await dirHandle.queryPermission(permissionOpts) === 'granted') {
    return true
  }
  // 无权限时申请授权，已授权过的目录这里会直接返回通过，不会弹出提示
  if (await dirHandle.requestPermission(permissionOpts) === 'granted') {
    return true
  }
  return false
}

2. 修正目录句柄获取逻辑

// get/set为你封装的IndexedDB存取方法
async function getValidDirHandle() {
  // 优先读取本地存储的句柄
  let dirHandle = await get('directory')
  
  // 存在存储的句柄时先校验权限
  if (dirHandle) {
    const hasValidPermission = await verifyPermission(dirHandle, 'readwrite')
    if (hasValidPermission) {
      return dirHandle
    }
  }

  // 无有效句柄/权限失效时，再唤起目录选择器
  try {
    // 注意：showDirectoryPicker必须在用户交互事件（如click）的回调中调用，否则会被浏览器拦截
    dirHandle = await window.showDirectoryPicker()
    // 保存新句柄到IndexedDB
    await set('directory', dirHandle)
    return dirHandle
  } catch (err) {
    // 处理用户主动取消选择的场景
    console.error('目录选择取消或失败', err)
    return null
  }
}

额外注意事项 #

• 所有涉及showDirectoryPicker()、权限申请的调用，必须绑定在用户主动触发的交互事件（点击、键盘输入等）中，否则会被浏览器安全策略直接拦截。
• 权限模式需要和实际使用场景匹配，如果需要写入文件权限，校验时要传入readwrite，仅读取的话传read即可，模式不匹配会导致授权不生效。
• 如果用户手动清除了站点的存储数据、权限记录，或者开启了浏览器退出自动清除数据的设置，已保存的句柄会自动失效，需要重新授权。

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