reactjs - 使用 redux 保护的路由和身份验证响应路由器 v4

Question

我正在使用带有 redux 的 React Router v4，如果用户未登录，我想利用私有(private)和 protected 路由进行重定向。

我有这个路由组件:

class Routes extends Component {

render() {
    const { auth } = this.props;
    // so checks against isAuthenticated can pass
    if (auth.isAuthenticated !== undefined) {
        return (
            <div>
                <Route exact component={() => <Home />} />
                <PublicRoute
                    authed={() => auth.isAuthenticated}
                    path="/login"
                    component={(routerProps) => <Login {...routerProps} />}
                />
                <PublicRoute
                    authed={() => auth.isAuthenticated}
                    path="/register"
                    component={(routerProps) => <Register {...routerProps} />}
                />
                <PrivateRoute
                    authed={() => auth.isAuthenticated}
                    path="/dashboard"
                    component={Dashboard}
                />
            </div>
        );
    } else {
        return <div></div>
    }
  }
}

function mapStateToProps(state) {
  return {
    auth: state.auth
  }
}

export default withRouter(connect(mapStateToProps)(Routes));

它的实现是这样的:

class Main extends Component {

constructor(props) {
    super(props);
}

componentDidMount() {
    store.dispatch(checkAuth());
}

render() {
    return (
        <Provider store={store}>
            <Router>
                <Theme>
                    <Routes />
                </Theme>
            </Router>
        </Provider>
    );
  }
}

这是私有(private)路由:

export function PrivateRoute({ component: Component, authed, ...rest }) {
const isAuthenticated = authed();
return (
    <Route
        {...rest}
        render={props =>
            isAuthenticated === true ? (
                <Component {...props} />
            ) : (
                <Redirect
                    to={{
                        pathname: "/login",
                        state: { from: props.location }
                    }}
                />
            )
        }
    />
  );
}

传递 auth 属性的最佳方法是什么，如果我连接路由组件并从那里传递 auth 可以吗，或者我应该从在其他地方，也许连接每个需要它的组件并从那里读取？另外，这种方法如何处理嵌套路由，例如 /dashboard/settings？谢谢

Answer 1

实际上，在react中使用这种类型的私有(private)路由是可以的，但是你应该检查两个时刻:

1. 我应该检查一下，您没有 exact 属性，因此您的所有路由如 /dashboard/panel1、/dashboard/panel2 将是私有(private)的

   auth.isAuthenticated} 路径=“/仪表板” 组件={仪表板} />

2. 您将遇到连接问题。有一个简单的解决方法:

   导出默认连接(mapStateToProps, null, null, { 纯:假， })(PrivateRoute);

更多信息请点击这里: React router private routes / redirect not working