Vue项目中Firebase Storage删除图片提示用户无访问权限问题

问题说明 #

在Vue项目中调用Firebase Storage删除图片时，触发「用户无访问权限」错误。移除安全规则的所有限制后可成功删除，确定问题出在安全规则配置上。

现有删除实现代码 #

async deleteAvatar(path) {
  console.log({ path });
  try {
    const imageRef = ref(storage, path);
    console.log({ imageRef });
    await deleteObject(imageRef);
  } catch (error) {
    console.log('File Delete Error');
    console.error(error);
  }
},

控制台日志信息 #

• 文件路径：/uploads/0QohgxJLyEdavJYQGziqHD9oqxJ2/profileImgs/1692216191041-Default-img.png
• 日志已打印出正确的文件路径及对应的Storage引用对象

当前安全规则配置 #

rules_version = '2';
service firebase.storage {
  match /b/{bucket}/o {
    match /uploads/{userId}/profileImgs/{imageName}{
      allow read;
      allow write: if request.auth.uid == userId && request.resource.contentType.matches('image/.*')
    }
  }
}

问题原因与修复方案 #

问题根源 #

删除操作属于write权限范畴，但执行删除时不存在request.resource对象（因为删除没有待上传的资源内容），导致规则中request.resource.contentType的校验直接失败，触发权限错误。

修正后的安全规则 #

rules_version = '2';
service firebase.storage {
  match /b/{bucket}/o {
    match /uploads/{userId}/profileImgs/{imageName}{
      allow read;
      // 区分上传（需校验类型）和删除操作的权限逻辑
      allow write: if request.auth.uid == userId 
                  && (request.method == 'delete' 
                      || request.resource.contentType.matches('image/.*'));
    }
  }
}

规则说明 #

• 保留用户UID匹配的校验，确保只有资源所属用户能操作
• 对write权限拆分两种场景：
  1. 删除操作：仅校验用户UID匹配即可，无需检查内容类型
  2. 上传操作：同时校验用户UID和资源为图片类型

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