私有路由 React Router 和 Redux答案

【问题标题】：Private Route React Router And Redux私有路由 React Router 和 Redux
【发布时间】：2020-08-13 17:44:48
【问题描述】：

我正在尝试使用身份验证流和私有路由构建一个简单的 React 应用程序，我首先检查用户是否登录并将其重定向以指定私有路由，但在应用程序转到私有路由后，她没有这里有用户信息是我的代码：

App.Js

class App extends Component {

componentDidMount() {
    this.props.fetchUser();
}

render() {
console.log('AUTH:' , this.props.signedIn);
return (
  <div>
    <BrowserRouter>
      <Switch>
          <Route exact path="/" render={() => <Redirect to={this.props.signedIn ? '/dashboard' : '/login'}/>}/>
          <Route exact path="/login" component={Login} />
          <PrivateRoute exact path="/dashboard" ><DashboardLayout/></PrivateRoute>
      </Switch>
    </BrowserRouter>
  </div>
);
  }
 }

const mapStateToProps = state => ({
    signedIn: state.auth.signedIn
});
const mapDispatchToProps = dispatch => ({
    fetchUser: () => dispatch(fetchUser())
});
export default connect(mapStateToProps, mapDispatchToProps)(App);

PrivateRoute.js

const PrivateRoute = ({children, signedIn, ...rest}) => {


const checkToken = (location) => {

    console.log("SignedIn", signedIn);
    if(signedIn) {
        return children;
    }
    else {
        return <Redirect to={{pathname: '/login', state: {from : location}}}/>
    }

};

return <Route
    {...rest}
    render={({location}) => checkToken(location)}
/>;
};

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


export default connect(mapStateToProps, null)(PrivateRoute)

所以，在我的谷歌控制台中，我看到我的控制台日志 AUTH 从 App.js 设置为 false，我的控制台日志 Signed In 也设置为 false，但在重新渲染后，我的应用程序控制台日志 AUTH 已设置为 True 但不再前往 PrivateRoute

【问题讨论】：

标签： reactjs redux react-router-dom

【解决方案1】：

我为 PrivateRoute 使用 3 个返回

儿童 - 授权用户
重定向到登录 - 用于非授权用户
还有一些 LoadingComponent - 等待获取用户

我们准备了具有不同占位符结构的加载组件列表，它们在页面加载时看起来像 youtube 中的占位符

const PrivateRoute = ({children, signedIn, isAuthReady, customPlaceholder, ...rest}) => {
  return (
    <Route {...rest} render={(location) => {
      if (!isAuthReady) {
        return customPlaceholder || <Placeholder /> 
      }

      if (signedIn) {
        return children;
      }

      return <Redirect to={{pathname: '/login', state: {from : location}}} />
    }} />
  )
}

const mapStateToProps = state => ({
  signedIn: state.auth.signedIn,
  isAuthReady: state.auth.isAuthReady
});

export default connect(mapStateToProps)(PrivateRoute)

【讨论】：