浏览器目录授权怎么做：权限复查与传统上传降级

浏览器里的素材管理、日志导入和本地配置编辑，经常需要用户选中一个文件夹，再读取里面的文件。浏览器文件夹句柄接口可以通过 showDirectoryPicker() 返回文件夹句柄，让页面按需读取文件；但它不是“拿到句柄就永久可写”，安全上下文、用户手势和权限复查都必须过关。

通过用户点击唤起文件夹选择器

文件夹授权应该绑定到明确的「选择工作文件夹」按钮。下面的函数只负责取得句柄并保存到内存，暂时不做批量读写，这样用户能知道每一步发生了什么。

let workspaceHandle;

async function chooseWorkspace() {
  if (!window.showDirectoryPicker) return { ok: false, reason: "unsupported" };
  try {
    workspaceHandle = await window.showDirectoryPicker({ mode: "readwrite" });
    return { ok: true, name: workspaceHandle.name };
  } catch (error) {
    if (error.name === "AbortError") return { ok: false, reason: "cancelled" };
    throw error;
  }
}

这段代码需要在 HTTPS 或本机开发环境等安全上下文中运行，而且调用链要从点击事件开始。把它放进定时器、页面初始化或后台分支，都可能失去用户手势资格。

拿到句柄后还要重新确认读写权限

句柄可以被保存到 IndexedDB，方便下次打开应用时恢复工作文件夹，但恢复出来的句柄不能直接当作“仍然有权限”。使用前先查询；查询不到时，再在用户点击“继续使用”后申请。

async function ensureWorkspacePermission(handle) {
  const options = { mode: "readwrite" };
  const current = await handle.queryPermission(options);
  if (current === "granted") return true;
  const renewed = await handle.requestPermission(options);
  return renewed === "granted";
}

async function readWorkspace(handle) {
  if (!(await ensureWorkspacePermission(handle))) {
    throw new Error("workspace-permission-denied");
  }
  const files = [];
  for await (const entry of handle.values()) {
    if (entry.kind === "file") files.push(entry.name);
  }
  return files;
}

如果用户拒绝权限，不要循环调用 requestPermission()。把页面状态改成“需要重新授权”，让用户通过按钮再次触发，这比不断弹窗更可控。

把不支持和拒绝权限都接入降级路径

浏览器文件夹句柄接口适合增强桌面浏览器体验，但页面不能把它当成唯一入口。基础方案可以使用文件选择器收集用户明确选择的文件，再通过上传接口交给服务端处理；它无法获得文件夹句柄的持续读写能力，却能覆盖更多环境。

function openFallbackInput() {
  const input = document.createElement("input");
  input.type = "file";
  input.multiple = true;
  input.setAttribute("webkitdirectory", "");
  input.addEventListener("change", () => uploadFiles(input.files));
  input.click();
}

async function openWorkspace() {
  if (!window.showDirectoryPicker) return openFallbackInput();
  const result = await chooseWorkspace();
  if (!result.ok && result.reason === "unsupported") openFallbackInput();
}

降级提示要说明差异：传统选择器只能提交本次选中的文件，不能让网页以后自动扫描本地文件夹。这个边界写清楚，用户就不会把“授权失效”误解成文件丢失。

常见坑：安全上下文、用户手势和写入流

• 部署在普通 HTTP 域名时，先检查安全上下文和浏览器控制台错误。
• 文件夹选择器必须从点击、键盘确认等用户动作触发，不能由后台任务代开。
• 写文件时要等待写入流关闭，再更新“已保存”状态；仅拿到文件句柄不代表内容已经落盘。
• 不要把句柄名称当作可信路径。文件名和文件夹名仍要经过业务侧校验。

发布前的最小验收清单

1. HTTPS、本机开发环境和普通 HTTP 三种环境的入口状态已区分。
2. 首次选择、刷新恢复、拒绝授权、取消选择四种状态都有可见反馈。
3. 读权限和写权限分别测试，写入失败不会覆盖原文件。
4. 不支持 API 时，文件选择器和上传接口仍能完成基本任务。

常见问题

文件夹选择器可以在页面加载时自动调用吗？

不建议也通常不可行。它需要用户手势，应该由用户点击“选择文件夹”按钮触发。

保存文件夹句柄后为什么还会再次询问权限？

句柄保存的是访问对象，不等于永久授权。应用重新打开或权限状态变化后，应先查询并在明确操作下重新申请。

浏览器文件夹句柄能访问用户电脑上的任意文件吗？

不能。用户必须主动选择文件夹或文件，网页只能在授予的范围内操作，浏览器也会限制调用环境和权限模式。

移动端或旧浏览器怎么处理？

保留文件选择器、多文件上传或服务端导入作为基础路径，能力检测通过后再启用文件夹句柄增强。

文件夹句柄带来的便利，建立在清楚的授权边界上。把“用户触发、权限复查、读写验收、传统降级”拆成四个阶段，文件工作流就能在能力差异和授权拒绝下稳定收敛。