Vue项目中使用Firebase Storage downloadURL显示图片异常的问题咨询

1. 安全规则逻辑完全写反（最直接导致图片加载失败的原因） #

你当前配置的Storage规则判定条件存在致命错误：

allow read, write: if request.auth != true;

这段代码的实际生效逻辑：
由于Firebase的request.auth字段不存在布尔值true的取值——该字段要么是null（用户未通过认证），要么是包含用户认证信息的对象（用户已登录）。
request.auth != true的判定会永远满足两个反向结果：

• 已登录用户发起的认证请求，因为request.auth是对象，不等于true，反而被规则拦截
• 未登录的公开请求，因为request.auth是null，不等于true，反而被规则放行

这个完全反向的权限判定，直接把所有正常的图片访问请求拦截了。

2. 规则适配修正方案 #

根据你的业务场景选择对应规则即可：

场景1：拿到带token的下载链接即可公开访问图片（匹配你当前用的downloadURL的使用场景） #

rules_version = '2';
service firebase.storage {
  match /b/{bucket}/o {
    // 读权限：允许带有效公共下载token的访问，以及已登录用户的访问
    allow read: if request.auth != null || request.method == 'GET';
    // 写权限：仅允许已登录用户上传/修改文件
    allow write: if request.auth != null;
  }
}

场景2：所有图片必须用户登录后才可访问 #

直接把原规则的判定条件修正为正确值即可：

rules_version = '2';
service firebase.storage {
  match /b/{bucket}/o {
    match /{allPaths=**} {
      // 修正原错误判定：仅已登录用户可执行读写
      allow read, write: if request.auth != null;
    }
  }
}

3. 其他排查注意事项 #

• 检查src属性的链接转义问题：你贴出的源链接里存在&的HTML实体转义，如果直接把这类带转义符的字符串赋值给img的src，会导致请求参数解析错误，无法拿到正确的文件资源
• 不要手动修改URL中的编码格式：你路径里的user-uploads%2Fimages%2FGitHub-Mark.png是对象路径的URL编码形式，手动把%2F替换成/会直接触发404错误
• 检查Storage的CORS配置，确保你Vue项目的部署域名在允许访问的域名列表里，避免跨域拦截导致资源加载失败

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