Điều kiện cuộc đua trong Amplify.Hub đăng nhập Trình xử lý khi sử dụng lời thề

Mã ví dụ:

Hub.listen('auth', event => {
  const { event: type, data } = event.payload;

  if (type === 'signIn') {
    const session = data.signInUserSession;
    console.log('SESSION', data.signInUserSession);
    setTimeout(() => {
      console.log('SESSION', data.signInUserSession);
    }, 100);
  }
});

Khi sử dụng lời thề, sau khi nhà cung cấp chuyển hướng đến ứng dụng của tôi, Hub sẽ khởi động một signInsự kiện. Tuy nhiên, signInUserSessiontài sản là nullkhi sự kiện được kích hoạt, nhưng sẽ có giá trị một thời gian sau đó (trong vòng 100 ms). Điều này dường như không xảy ra khi sử dụng Auth.signIn(email, password)trực tiếp; signInUserSessionđược đưa vào khi sự kiện bị sa thải.

Điều gì đang xảy ra ở đây, và làm thế nào tôi có thể đi xung quanh nó? Hiện tại, tôi có một sự chậm trễ rõ ràng trong mã, đó là một vụ hack khủng khiếp.

Có lẽ cách JavaScript cũ để chờ giá trị được điền là hữu ích để đảm bảo rằng mã không bị lỗi ngay cả khi mất nhiều thời gian hơn dự kiến ​​trong việc điền giá trị.

Đây là một mã mẫu mà tôi thường sử dụng khi không có tùy chọn nào khác.

waitForValue(){
    if(myVar!= null && typeof myVar !== "undefined"){
        //value exists, do what you want
        console.log(myVar)
    }
    else{
        setTimeout(() => {this.waitForValue()}, 100);
    }
}

Bạn có thể cấu trúc lại mã mẫu này theo nhu cầu của bạn.

Ngoài ra, AWS Amplify cũng có những cách khác để có được phiên người dùng đã đăng nhập hiện tại. vd Auth.currentAuthenticatedUser()và Auth.currentSession()trả lại lời hứa. Chúng có thể được sử dụng như thế này

private async getUser(){
    let user = null;
    try {
      user = await Auth.currentAuthenticatedUser();
      //console.log(user);
    } catch (err) {
      //console.log(err);
    }
    //return user;
  }

Tôi không quen với việc khuếch đại aws - chỉ cần đọc một số github và cho đến nay tôi có thể thấy chúng tôi sẽ cần thông tin về userPoolviệc triển khai của bạn - tôi đoán một số vấn đề gọi lại kỳ lạ

Nhưng đối với một cách giải quyết, bạn có thể ủy quyền tham chiếu:

const event = {type: "signIn", data: {signInProperty: "null"}}

setTimeout(()=>event.data.signInProperty = "{Stack: Overflow}", 1000)

// mock events
function emit(type, args){
  console.log(type, args)
}

//initialize
let watchedValue = event.data.signInProperty
document.getElementById("app").innerHTML = event.data.signInProperty 
// protect reference
Object.defineProperty(event.data, "signInProperty", {
    set(newValue){
      watchedValue = newValue
      document.getElementById("app").innerHTML = newValue
      emit("event:signInCompleted", event.data)
    },
    get(){
      return watchedValue
    }
})

<div id="app"></div>