-2

我正在尝试找出一种将用户的身份验证状态存储在redux商店内的方法。假设isAuthenticated存储用户是否登录的状态。现在，我有一个由服务器发送的 cookie(httpOnly) 来记住用户，这样他们就不需要在每次访问应用程序时都输入凭据。
流程：用户某天登录到应用程序但没有注销并关闭浏览器。现在，他回来访问我的应用程序。由于 cookie 存在于浏览器中，这将由应用程序自动发送（无需用户交互），如果 cookie 有效，isAuthenticated: true. 很简单的要求。
跟踪身份验证状态应该是应用程序完成的第一件事，所以我把这个逻辑放在第一位，在 App.js 呈现之前。

class App extends Component {

  store = configureStore();

  render() {
    return (
      <Provider store={this.store}>
        <ConnectedRouter history={history}>
          <>
            <GlobalStyle />
              <SiteHeader />
              <ErrorWrapper />
              <Switch>
                <PrivateHomeRoute exact path="/" component={Home} />
                <Route exact path="/login" component={LoginPage} />
                <PrivateHomeRoute path="/home" component={Home} />
             ........code
}

这是configureStore()

export const history = createBrowserHistory();

const configureStore = () => {
  const sagaMiddleware = createSagaMiddleware();

  const store = createStore(
    rootReducer(history),
    composeEnhancers(applyMiddleware(sagaMiddleware, routerMiddleware(history)))
  );
  sagaMiddleware.run(rootSaga);

  store.dispatch({ type: AUTH.AUTO_LOGIN });

  return store;
};

store.dispatch({ type: AUTH.AUTO_LOGIN });是我尝试应用程序将自动登录作为应用程序中的第一个操作的代码。这个动作由一个redux-saga

function* handleAutoLogin() {
  try {
    const response = yield call(autoLoginApi);
    if (response && response.status === 200) {
      yield put(setAuthenticationStatus(true));
    }
  } catch (error) {
    yield put(setAuthenticationStatus(false));
  }
}

function* watchAuthLogin() {
  yield takeLatest(AUTH.AUTO_LOGIN, handleAutoLogin);
}

autoLoginApi是对axios携带 cookie 的服务器的调用。setAuthenticationStatus(true)是将设置为的动作创建isAuthenticated者true false。

所以，是的，这是有效的，但并不像预期的那样。因为，应用程序应该首先设置第 isAuthenticated一个，然后继续 App.js 渲染（）。但是，由于设置了isAuthenticated一些秒（api调用），应用程序首先呈现，isAuthenticated: false然后在AUTH.AUTO_LOGIN完成后，然后应用程序为经过身份验证的用户重新呈现。

那有什么问题呢？对于普通组件，它可能不是问题，例如这个SiteHeader组件

class SiteHeader extends React.Component {
  render() {
    const { isLoggedIn } = this.props;

    if (isLoggedIn === null) {
      return "";
    } else {
      if (isLoggedIn) {
        return (
          <LoggedInSiteHeader />
        );
      } else {
        return (
          <LoggedOutSiteHeader />
        );
      }
    }
  }
}

const mapStateToProps = ({ auth, user }) => ({
  isLoggedIn: auth.isLoggedIn,
});

export default connect(
  mapStateToProps,
  null
)(SiteHeader);

但是，此解决方案不适用于自定义路由。

const PrivateHomeRoute = ({ component: ComponentToRender, ...rest }) => (
  <Route
    {...rest}
    render={props =>
      props.isLoggedIn ? (
        <ComponentToRender {...props} />
      ) : (
        <Redirect to="/login" />
      )
    }
  />
);

const mapStateToProps = auth => ({
  isLoggedin: auth.isLoggedIn
});

export default connect(
  mapStateToProps,
  null
)(PrivateHomeRoute);

PrivateHomeRoute在 redux 存储更新之前得到解决，因此 Route 总是转到"/login".

我正在寻找一种解决方案，在该解决方案中，应用程序在身份验证操作未完成之前不会继续进行。但是，我不知道在哪里放置该代码？

我尝试了几件事：

  1. async awaiton configureStore()- 错误来了
  2. async await开App.js- 错误

PS：我正在使用 redux、redux-saga、react-router-dom、connected-react-router、axios 的库

4

1 回答 1

0

我想出的一种方法：
创建一个单独的组件MyRouteWrapper，它将根据isLoggedIn状态返回路由。为了解决这个问题，我停止渲染路由，直到自动登录更改isLoggedIn状态。

我将默认状态设置isLoggedIn为null。现在，如果状态为null，MyRouteWrapper将返回一个空字符串，一旦状态更改为true/ false，它将返回路由，然后渲染相应的组件。

我改变了我的 App.js

const store = configureStore();

class App extends Component {
  render() {
    return (
      <Provider store={store}>
        <ConnectedRouter history={history}>
          <MyRouteWrapper />
        </ConnectedRouter>
      </Provider>
    );
  }
}    
export default App;

确保Route仅在状态更改为true/时才返回的组件false

const MyRouteWrapper = props => {
  if (props.isLoggedIn === null) {
    return "";
  } else {
    return (
      <>
        <GlobalStyle />
        <SiteHeader />
        <ErrorWrapper />
        <Switch>
          <ProtectedHomeRoute
            exact
            path="/"
            component={Home}
            isLoggedIn={props.isLoggedIn}
          />
          <Route path="/profile/:id" component={Profile} />
          <Route path="/login" component={LoginPage} />
        </Switch>
      </>
    );
  }
};

const mapStateToProps = ({ auth }) => ({
  isLoggedIn: auth.isLoggedIn
});

export default connect(mapStateToProps)(MyRouteWrapper);

这解决了这个问题。

我仍然很想知道任何人想到的解决方案（更好）。

于 2019-03-13T14:41:58.420 回答