使用React Native和Image Crop Picker同時上傳到存儲和數據庫時，Firebase錯誤代碼403

Question

我能夠成功將圖像上傳到Firebase存儲，但是我也試圖將圖像URL上傳到我的Firebase數據庫。

我遇到的問題是上載到Firebase數據庫的URL與成功的Firebase存儲映像具有不同的令牌，因此我收到一條錯誤消息（錯誤代碼403，權限被拒絕）。

問題可能是由於我的addProfilePhototoDatabase函數的位置，但是我不確定將它放在哪里。

請在下面的屏幕截圖中查看我的代碼。

這是openPicker函數代碼：
我發現很難為此提供最少的代碼，因為它非常重要且相關。 我拿出的任何東西都可能很重要。

openPicker() {
    const { currentUser } = firebase.auth()
    const Blob = RNFetchBlob.polyfill.Blob
    const fs = RNFetchBlob.fs
    window.XMLHttpRequest = RNFetchBlob.polyfill.XMLHttpRequest
    window.Blob = Blob
    ImagePicker.openPicker({
      width: 105,
      height: 105,
      compressImageMaxWidth: 400,
      compressImageMaxHeight: 400,
      compressImageQuality: 0.8,
      cropping: true,
      mediaType: 'photo'
    }).then(image => {
      const imagePath = image.path
      let uploadBlob = null
      const imageRef = firebase.storage()
        .ref(`/users/${currentUser.uid}`)
        .child('profile.jpg')
      let mime = 'image/jpg'
      fs.readFile(imagePath, 'base64')
        .then((data) => {
          return Blob.build(data, { type: `${mime};BASE64` })
      })
      .then((blob) => {
        uploadBlob = blob
        return imageRef.put(blob, { contentType: mime })
      })
      .then(() => {
        uploadBlob.close()
        return imageRef.getDownloadURL()
      })
      .then((url) => {
        let obj = {}
        obj["profilePhoto"] = url
        this.addProfilePhotoDatabase() // this is where I'm attempting to upload the url to the database and where the problem is
        this.setState(obj)
      })
      .catch((error) => {
        Alert.alert(error)
      })
  })
  .catch((error) => {
    Alert.alert(error)
  })
}

addProfilePhotoDatabase函數的代碼：

addProfilePhotoDatabase() {
  const { currentUser } = firebase.auth();
  firebase
    .database()
    .ref(`/users/${currentUser.uid}/profile`)
    .update({
      ProfilePhoto: this.state.profilePhoto,
    })  
}

這是我調用openPicker函數的方式：

<TouchableOpacity style={[styles.profilePhotoContainer]} onPress={ () => this.openPicker() }>
    <Image source={require('../assets/images/icons/today/addProfile.png')} style={styles.profilePhoto}/> 
  </TouchableOpacity>

這是我的Firebase存儲規則：

service firebase.storage { 
  match /b/{bucket}/o { 
    match /{allPaths=**} { 
      allow read, write: if request.auth != null; 
    } 
  } 
}

我的Firebase數據庫規則是：

{ 
  "rules": { 
    "users": { 
      "$uid": { 
        ".read": "$uid === auth.uid", 
        ".write": "$uid === auth.uid" 
      } 
    } 
  } 
}

Answer 1

經過進一步的檢查，我懷疑是在錯誤的位置調用了addProfilePhotoDatabase（）。

之前：

  .then((url) => {
    let obj = {}
    obj["profilePhoto"] = url
    this.addProfilePhotoDatabase() //at this point state hasn't been set yet and the url was being added to firebase database with the wrong token which gave me a 403 error
    this.setState(obj)
  })

后：

  .then((url) => {
    let obj = {}
    obj["profilePhoto"] = url
    this.setState(obj)
    this.addProfilePhotoDatabase() //at this point state is set and the url gets added correctly
  })