redux-auth-wrapper 在身份验证后不重定向

Question

我有以下 react-router 设置：

const UserIsAuthenticated = UserAuthWrapper({
  authSelector: state => state.get('user').toJS(),
  predicate: authData => !!authData.token,
  redirectAction: routerActions.replace,
  wrapperDisplayName: 'UserIsAuthenticated'
})

const Authenticated = UserIsAuthenticated(props => props.children)

const routes =
  <Route path="/">
    <IndexRoute component={UserIsAuthenticated(applyFrame(Catalog))} />
    <Route path="login" component={Login} />
    <Route component={applyFrame(Authenticated)}>
      <Route path="catalog" component={Catalog}>
        <Route path="overview" component={CatalogOverview} />
        <Route path="form" component={CatalogForm} />
        <Route path="confirmation" component={CatalogConfirmation} />
      </Route>
      <Route path="ive">
        <IndexRoute component={Page} />
        <Route path=":id" component={PageDetail} />
      </Route>
    </Route>
  </Route>

我想实现以下目标：当用户未通过身份验证并访问根位置 (/) 时，将显示登录屏幕，用户登录后将被重定向到目录视图。当用户访问另一个位置（例如 /catalog/overview）时，系统将提示用户登录，在成功验证后，用户将被重定向到 /catalog/overview.

事实是：初始重定向工作正常。每当我尝试访问某个位置时，都会显示登录页面。所以我们可以声明 redirectAction 正在工作。另外：authSelector 工作得很好，因为当我 console.log state.get('user') 我得到通常处于我状态的用户对象。此外：当我从第一个 IndexRoute 导航中删除 UserIsAuthenticated 时，导航正常工作。

当我登录时，我的 Redux DevTools 显示我的令牌正在设置，我希望我的 react-router-redux routerActions.replace 对此做出响应。

我的userReducer.js:

import { Map } from 'immutable'

import {
  USER_LOGGED_IN,
  USER_LOGGED_OUT
} from './consts'

export default function authenticationReducer (
  state: Map<*, *> = Map({}), action: Object
) {
  switch (action.type) {
    case USER_LOGGED_IN:
      return state
        .set('token', action.payload.get('token'))
    case USER_LOGGED_OUT:
      return state
        .set('token', undefined)
    default:
      return state
  }
}

这就是我加载路线的方式：

const renderApp = () => {
  ReactDOM.render(
    <AppContainer>
      <MuiThemeProvider muiTheme={muiTheme}>
        <Provider store={store}>
          <Router history={history} routes={routes} />
        </Provider>
      </MuiThemeProvider>
    </AppContainer>,
    document.getElementById('root')
  )
}

如何让这些路由在登录时重新触发？

Answer 1

我遇到了同样的问题，我已经通过在 Login 组件 render 中添加重定向来修复它（与您的代码只有一处不同，我通过检查 user 道具，不是 user.token):

export class Login extends React.PureComponent {
  static propTypes = {
    dispatchLogin: React.PropTypes.func,
    dispatchLogout: React.PropTypes.func,
    user: React.PropTypes.object,
    location: React.PropTypes.object,
    router: React.PropTypes.object,
  }

  render() {
    const { dispatchLogout, dispatchLogin, user, location, router } = this.props;

    // make redirect if user is logged in and redirect is required
    if (user) {
      if (location && location.query && location.query.redirect && router) {
        router.push(location.query.redirect);
      }
    }

    const handleLogin = (values) => new Promise((resolve, reject) => {
      dispatchLogin(values, { resolve, reject });
    });

    return (
      <div className={`${styles.loginPage} container`}>
        <Helmet title="Login" />
        <h2>Login</h2>
        {!user && <LoginForm onSubmit={handleLogin} />}
        {user &&
          <div>
            <p>You are currently logged in as {user.name}.</p>
            <button className="btn btn-danger" onClick={dispatchLogout}>
              <i className="fa fa-sign-out" />{' '}Log Out
            </button>
          </div>
        }
      </div>
    );
  }
}

redux-auth-wrapper 在身份验证后不重定向

redux-auth-wrapper does not redirect after authentication

react-router

react-router-redux