MOBX連接一個observable而不是更新它

我正在使用 Mobx、MUI V5、react-router V6 和 react-hook-form 構建登錄頁面。

我的第一個 API 呼叫是對應用程式進行身份驗證，apiAuth()將回傳一個需要傳遞給所有后續 API 呼叫的令牌。在下一次通話中userAuth()，我嘗試驗證用戶憑據。如您所見，該方法采用 3 個引數（令牌、卡號和密碼）

• 當用戶憑據有效時，我可以成功登錄。
• 當用戶憑據在第一次嘗試時無效時，它會按預期作業。我從 API 收到 400 (Bad Request) 錯誤并在界面上顯示錯誤訊息。

也就是說，當我再次輸入用戶憑據時，我收到 401（未經授權）錯誤。

在進一步檢查請求標頭后，當我比較兩個userAuth()呼叫中的授權標頭時，我看到第二個呼叫中的令牌值與前一個令牌連接

關于為什么會出現這種行為的任何想法？

我的AuthStore樣子如下：

class AuthStore {
    isAuth = false
    isAuthFail = false
    AuthFailObj = {}
    bearerToken = '' 
    cardNum = ''
    password=''

    constructor() {
        makeObservable(this, {
            isAuth: observable,
            AuthFailObj: observable,
            isAuthFail:observable,
            bearerToken: observable,
            cardNum: observable,
            password: observable,
            auth: action,
            setIsAuth: action,
            setToken: action,
            setCardNum: action,
            setPassword: action,
            setIsAuthFail: action,
            setAuthFailObj: action
        })
    }

    setIsAuth = isAuth => {
        this.isAuth = isAuth
    }
    
    setToken = bearerToken => {
        this.bearerToken = bearerToken
    }
    
    setCardNum = cardNum => {
        this.cardNum = cardNum
    }

    setPassword = password => {
        this.password = password
    }

    setIsAuthFail = b => {
        this.isAuthFail = b
    }

    setAuthFailObj = ojb => {
        this.AuthFailObj = ojb
    }

    auth = async () => {

        const apiRes = await apiAuth()
        
        if (apiRes.status === 200){
            const apiData = await apiRes.text()
            this.setToken(JSON.parse(apiData)[0].token)
        }
        
        const userAuthRes = await userAuth(this.bearerToken, this.password, this.cardNum)

        if (!userAuthRes.ok){
            this.setIsAuthFail(true)
            const errRes = await userAuthRes.text()
            userAuthRes.status === 400 && this.setAuthFailObj(JSON.parse(errRes))
            userAuthRes.status === 401 && this.setAuthFailObj('401 (Unauthorized)')
        }
        
        if (userAuthRes.ok){
            const userAuthData = await userAuthRes.text()
            userStore.updateUserProfile(JSON.parse(userAuthData))
            this.setIsAuth(true)
        }
    }

}

export default new AuthStore()

在登錄表單中，提交方法如下所示：

const submit = async (data) => {
    AuthStore.setCardNum(data.Card_Number)
    AuthStore.setPassword(data.Password)
    setToggle(true)
    await AuthStore.auth()
    if (AuthStore.isAuth) {
      navigate('/dashboard')
    } else {
      // clear form
    }
  }

最后，PrivateRoute邏輯讀取很簡單：

const PrivateRoute = () => {
      return AuthStore.isAuth ? <Outlet /> : <Navigate to='/' />
    }

功能 userAuth()

const myHeaders = new window.Headers()
const { REACT_APP_API_ACC_MNG_AUTH_URL } = process.env

const userAuth = async (bearerToken, password, cardNum) => {
  myHeaders.append('Authorization', `Bearer ${bearerToken}`)
  myHeaders.append('Content-Type', 'application/json')

  const raw = JSON.stringify({
    cardNumber: cardNum,
    pinNumber: password
  })

  const requestOptions = {
    method: 'POST',
    headers: myHeaders,
    body: raw,
    redirect: 'follow'
  }

  const response = await window.fetch(REACT_APP_API_ACC_MNG_AUTH_URL, requestOptions)
  return response
}

uj5u.com熱心網友回復：

問題是您正在使用 Headers API 并附加到 headers 而不是設定它們，它們存在于函式范圍之外并已更新。來自MDN：

Headers 介面的 append() 方法將新值附加到 Headers 物件內的現有標頭上，如果標頭不存在，則添加該標頭。

因此，每次您發出請求時，如果您附加標頭，它將被添加到現有值中。您可以將標頭宣告移動到函式內部，并在每次發出請求時創建一個新物件：

const { REACT_APP_API_ACC_MNG_AUTH_URL } = process.env

const userAuth = async (bearerToken, password, cardNum) => {
  const myHeaders = new window.Headers()
  myHeaders.append('Authorization', `Bearer ${bearerToken}`)
  myHeaders.append('Content-Type', 'application/json')

  const raw = JSON.stringify({
    cardNumber: cardNum,
    pinNumber: password
  })

  const requestOptions = {
    method: 'POST',
    headers: myHeaders,
    body: raw,
    redirect: 'follow'
  }

  const response = await window.fetch(REACT_APP_API_ACC_MNG_AUTH_URL, requestOptions)
  return response
}

或者您可以將它們作為物件傳遞，這是 Fetch API 允許的：

const userAuth = async (bearerToken, password, cardNum) => {

  const raw = JSON.stringify({
    cardNumber: cardNum,
    pinNumber: password
  });

  const requestOptions = {
    method: 'POST',
    headers: myHeaders,
    body: raw,
    redirect: 'follow',
    headers: {
      'Authorization': `Bearer ${bearerToken}`,
      'Content-Type': 'application/json',
    }
  };

  const response = await window.fetch(REACT_APP_API_ACC_MNG_AUTH_URL, requestOptions);
  return response;
}

標籤：

上一篇：如何將一個角度移近另一個角度？

下一篇：背景關系和減速器不回傳狀態