Redux React 路由器：无法访问受保护/私有路由

Question

我有一个受保护的路由，只有在用户登录并将 isAuthenticated 设置为 true 时才能访问该路由。我遇到的问题是，即使在成功登录并通过身份验证后，我也会被重定向到登录页面。在下面我的 redux reducer 文件中，isAuthenticated 状态默认设置为 null。奇怪的是，如果我将 isAuthenticated 默认值设置为 true 然后登录成功，我可以访问受保护的路由。但是，当 isAuthenticated 设置为 null 时，即使我成功登录，我也无法访问受保护的路由。如果有人可以提供帮助，将不胜感激。谢谢。

//Redux Reducer 文件

import{
  LOGIN_FAIL,
  LOGIN_SUCCESS,
  USER_LOADING,
  USER_LOADED,
  AUTH_ERROR
} from '../actions/types';

const initialState = {
  token: localStorage.getItem('token'),
  isAuthenticated: null,
  isLoading: false,
  user: null
};

export default function(state = initialState, action){
  switch(action.type){
    case USER_LOADING:
      return{
        ...state,
        isLoading: true
      };
    case USER_LOADED:
      return{
        ...state,
        isAuthenticated: true,
        isLoading: false,
        user: action.payload
      };
    case LOGIN_SUCCESS:
    localStorage.setItem('token', action.payload.token);
    return{
      ...state,
      ...action.payload,
      isAuthenticated: true,
      isLoading: false
    };
    case LOGIN_FAIL:
    case AUTH_ERROR:
    localStorage.removeItem('token');
      return{
        ...state,
        token: null,
        isAuthenticated: false,
        isLoading: false,
        user: null
      };

    default:
      return state;
  }

}

//受保护的路由文件

export const ProtectedRoute = ({
  isAuthenticated,
  component: Component,
  ...rest
})=>(
  <Route {...rest} component={(props) =>(
    isAuthenticated ? (
      <Component {...props}/>
    ):(
      <Redirect to="/login"/>
    )
  )}/>

)

ProtectedRoute.propTypes = {
  isAuthenticated: PropTypes.bool
}
const mapStateToProps = state =>({
  isAuthenticated: state.auth.isAuthenticated
});

export default connect(mapStateToProps)(ProtectedRoute)

//App.js 文件

class App extends Component{
  componentDidMount(){
    store.dispatch(loadUser());
  }
  render(){
  return(
  <Provider store={store}>
  <div className="App">
    <Router>
      <Switch>
        <Route exact path="/login" component={LoginPage}/>
        <ProtectedRoute exact path="/userfeed" component={UserFeed}/>
      </Switch>
    </Router>
  </div>
  </Provider>

);
}
};

export default App;

Answer 1

在你的 app.js 中像这样改变

   <Switch>
 { !isAuthenticated ?  <Route exact path="/login" component={LoginPage}/>
   : <ProtectedRoute exact path="/userfeed" component={UserFeed}/> }
  </Switch>