javascript - 异步 Redux 操作 : add auth token to fetch() request

Question

我目前有一个异步 redux 操作(带中间件)，它从我的后端获取数据。我正在添加 Firebase 身份验证，并希望在此请求中包含身份验证 token 。使用下面的函数 getAuthToken() 异步获取授权 token 。下面的代码不起作用，提示

Cannot read property 'resolve' of undefined

这个简单的任务，将一个异步的输出链接到另一个，但我是 JS 的新手。我怎样才能做到这一点？

// I'm sure returning from an async function like this is wrong.
function getAuthToken() {
  firebase
    .auth()
    .currentUser.getIdToken(/* forceRefresh */ true)
    .then(idToken => {
      return idToken;
    });
}

// Async redux action.
export function getData(userId) {
  return dispatch => {
    return fetch(`${BASE_URL}/data/${userId}`, {
      headers: { Authorization: getAuthToken().resolve() } // Can I even resolve like this?
    })
      .then(response => response.json())
      .then(json => dispatch(returnSurveys(json)));
  };
}

Answer 1

短期解决方案:先等待 token ，然后发送您的请求。

function getAuthToken() {
  return firebase
    .auth()
    .currentUser.getIdToken(/* forceRefresh */ true)
    .then(idToken => {
      return idToken;
    });
}

export function getData(userId) {
  return dispatch => {
    return getAuthToken().then(token => 
      fetch(`${BASE_URL}/data/${userId}`, {
        headers: { Authorization: token } // Can I even resolve like this?
      })
      .then(response => response.json())
      .then(json => dispatch(returnSurveys(json))));
  };
}

缺点:每次你想向后端询问某事时调用 getAuthToken 绝对是不好的做法。

所以你最好把 token 和其他数据一样放入 Redux。

然后您可以从外部传递 token :

export function getData(userId, token) { ....

或者，可能更好，在你的 thunk 中向商店请求 token (第二个参数 getState 由 redux-thunk 传递):

export function getData(userId) {
  return (dispatch, getState) => {
    return fetch(`${BASE_URL}/data/${userId}`, {
      headers: { Authorization: getState().path.to.token.in.your.store } 
    })

在一段时间内，它被认为是一种相当糟糕的方法，这就是它不广为人知的原因。但是有不同的points of view对我来说，你的情况非常适合。