如何获取Firebase Storage访问令牌并将存储的图片展示到网站？

问题原因 #

你当前代码直接将存储引用对象itemRef转为字符串存入数组，拿到的只是存储资源的本地路径标识，并非可直接在网页访问的资源URL。不需要手动获取Access Token，Firebase Storage官方提供了getDownloadURL接口直接生成可公开访问的资源地址。

修改步骤 #

1. 首先导入缺失的getDownloadURL方法：

// 修改原有import语句，新增getDownloadURL导入
import { getStorage, ref, uploadBytes, listAll, getDownloadURL } from "firebase/storage";

2. 修改mounted中遍历存储资源的逻辑，调用接口获取真实访问地址：

res.items.forEach((itemRef) => {
  // 调用getDownloadURL获取图片可访问地址
  getDownloadURL(itemRef)
    .then(imgUrl => {
      this.photos.push(imgUrl)
    })
    .catch(err => {
      console.log('获取图片地址失败：', err)
    })
});

注意事项 #

• 调用前需确认Firebase Storage的安全规则已经开放了design/路径的读取权限，否则会返回权限错误，测试阶段可以临时配置对应路径的公开读权限，生产环境再根据业务场景做权限控制。
• 如果需要上传完成后立即拿到刚上传文件的访问地址，也可以在uploadBytes的成功回调中，对上传返回的ref对象调用getDownloadURL直接获取地址。

完整修改后代码参考 #

<template>
  <div>
    <input type="file" id="dosya" @change="putDesign()" />
    <!-- 测试展示图片 -->
    <img v-for="(url, index) in photos" :key="index" :src="url" style="width: 200px; margin: 10px;" />
  </div>
</template>

<script>
import { initializeApp } from "firebase/app";
import { getStorage, ref, uploadBytes, listAll, getDownloadURL } from "firebase/storage";

const firebaseConfig = {
  apiKey: "",
  authDomain: "",
  databaseURL: "",
  projectId: "",
  storageBucket: "",
  messagingSenderId: "",
  appId: "",
};

const app = initializeApp(firebaseConfig);
const storage = getStorage(app);

export default {
  data() {
    return {
      fileName: "",
      resim: "",
      photos: [],
    };
  },
  methods: {
    // 你原有putDesign方法的实现这里保留
    async putDesign() {
      const file = document.getElementById('dosya').files[0]
      const storageRef = ref(storage, `design/${file.name}`)
      // 上传完成后也可以直接获取地址
      await uploadBytes(storageRef, file)
      const uploadUrl = await getDownloadURL(storageRef)
      this.photos.push(uploadUrl)
    }
  },
  mounted() {
    const listRef = ref(storage, "design/");
    listAll(listRef)
      .then((res) => {
        res.prefixes.forEach((folderRef) => {
          console.log(folderRef);
        });
        res.items.forEach((itemRef) => {
          getDownloadURL(itemRef)
            .then(imgUrl => {
              this.photos.push(imgUrl)
            })
            .catch(err => {
              console.log('获取图片地址失败：', err)
            })
        });
      })
      .catch((error) => {
        console.log(error);
      });
  },
};
</script>

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