javascript - 当登录用户为假时，React 上的 PrivateRoute 不会重定向

Question

我正在尝试在我的应用程序中实现一些安全性并最终创建了以下代码：

import React from 'react';
import { Route, Redirect } from 'react-router-dom';
import PropTypes from 'prop-types';
import { connect } from 'react-redux';

const PrivateRoute = ({
  component: Component,
  auth: { isAuthenticated, loading },
  ...rest
}) => (
  <Route
    {...rest}
    render={props =>
      !isAuthenticated && !loading ? (
        <Redirect to='/auth/login' />
      ) : (
        <Component {...props} />
      )
    }
  />
);

PrivateRoute.propTypes = {
  auth: PropTypes.object.isRequired
};

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

export default connect(mapStateToProps)(PrivateRoute);

auth来自我的状态管理，当从我的 Chrome 浏览器上安装的 Redux Devtools 中查看时看起来完全一样；这里是：

isAuthenticated并且loading通常在用户登录时为真；效果很好。我遇到的问题是，当没有人登录时，我的 PrivateRoute 不会重定向到auth/login页面。有谁知道如何解决这个问题？这是我需要 PrivateRoute 组件的路线之一的示例：

<PrivateRoute exact path='/edit-basics' component={EditBasics} />

上面的路线是编辑当前登录用户信息的页面，仅对他/她可用。我仍然可以在没有登录的情况下访问它。

标签： javascriptreactjs

Answer 1

看起来您没有将 auth 道具传递给 PrivateRoute。尝试添加它。

<PrivateRoute exact path='/edit-basics' component={EditBasics} auth={this.props.auth}/>