终极版认证 - 包装不重定向认证

Question

后，我已经得到了以下反应路由器设置：

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> 
    ); 
    } 
}