在 401 上与 redux-saga dispatch logout action 反应

Question

我有一个 React.JS SPA，使用 redux-saga 制作，使用 auth0 的 @auth0/auth0-spa-js 库处理用户身份验证。我想在我的 API return 出现 401 错误时发送一个 LOGOUT 操作，也许是在第一次尝试刷新令牌之后。

执行此恕我直言的最佳位置是 HTTP 处理程序。我的如下所示：

/**
 * Parses the JSON returned by a network request
 *
 * @param  {object} response A response from a network request
 *
 * @return {object}          The parsed JSON from the request
 */
function parseJSON(response) {
  if (response.status === 204 || response.status === 205) {
    return null;
  }
  return response.json();
}

/**
 * Checks if a network request came back fine, and throws an error if not
 *
 * @param  {object} response   A response from a network request
 *
 * @return {object|undefined} Returns either the response, or throws an error
 */
function checkStatus(response) {
  if (response.status >= 200 && response.status < 300) {
    return response;
  }

  const error = new Error(response.statusText);
  error.response = response;
  throw error;
}

/**
 * Requests a URL, returning a promise
 *
 * @param  {string} url       The URL we want to request
 * @param  {object} [options] The options we want to pass to "fetch"
 *
 * @return {object}           The response data
 */
export default function request(url, options) {
  const headers = {
    Accept: 'application/json',
    'Content-Type': 'application/json',
    'Access-Control-Request-Headers': 'Content-Type, Authorization'
  };
  const token = localStorage.getItem('token');
  if (token) {
    headers['Authorization'] = `Bearer ${token}`;
  }
  const newOptions = {
    ...options,
    mode: 'cors',
    headers
  };
  return fetch(url, newOptions)
    .then(checkStatus)
    .then(parseJSON)
    .catch(err => {
      // check for 401 here and throw an action to clean the store and logout.
      if (err.response.status === 401) {
        // need to try to get a refresh token
        // if refresh did not work dispatch logout
        store.dispatch(logout);
      }
      throw err;
    });
}

我的问题是从此代码访问 store.dispatch()。我不想调用 configureStore()，因为它会 return 一个新的商店实例。当我们传递给组件时，组件可以访问商店，如下所示：

const initialState = {};
const store = configureStore(initialState);
const MOUNT_NODE = document.getElementById('root');

const onRedirectCallback = appState => {
  history.push(
    appState && appState.targetUrl
      ? appState.targetUrl
      : window.location.pathname
  );
};

ReactDOM.render(
  <Auth0Provider
    domain={process.env.REACT_APP_AUTH0_DOMAIN}
    audience={process.env.REACT_APP_AUTH0_AUDIENCE}
    scope={'openid profile email'}
    client_id={process.env.REACT_APP_AUTH0_CLIENT_ID}
    redirect_uri={window.location.origin}
    onRedirectCallback={onRedirectCallback}
  >
    <Provider store={store}>
      <ConnectedRouter history={history}>
        <App />
      </ConnectedRouter>
    </Provider>
  </Auth0Provider>,
  MOUNT_NODE
);

如何从 HTTP 请求处理程序访问它而不做任何混乱的事情，比如将商店附加到 window 对象？

Answer 1

您无需致电 configureStore。您从 configureStore 获得的值是实际商店。您可以导出它并在任何您想要的地方使用它：

export store = configureStore(initialState);

在其他文件中，例如您的请求处理：

import { store } from './where-you-make-store';

export default function request(url, options) {
  ...
  return fetch(url, newOptions)
    .then(checkStatus)
    .then(parseJSON)
    .catch(err => {
      // check for 401 here and throw an action to clean the store and logout.
      if (err.response.status === 401) {
        // need to try to get a refresh token
        // if refresh did not work dispatch logout
        store.dispatch(logout);
      }
      throw err;
    });
}

本文还有一些其他选择：https://daveceddia.com/access-redux-store-outside-react/

在 401 上与 redux-saga dispatch logout action 反应

React with redux-saga dispatch logout action on 401

reactjs

auth0

redux

redux-saga