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

Posted 2023-02-22

【中文标题】使用 redux 保护的路由和身份验证反应路由器 v4

【英文标题】：React router v4 with redux protected routes and auth

【发布时间】：2018-05-21 22:29:32

【问题描述】：

我正在使用带有 redux 的反应路由器 v4，如果用户未登录，我想利用私有和受保护的路由进行重定向。

我有这个 Routes 组件：

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

这是 PrivateRoute：

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 道具的最佳方式是什么，如果我连接Routes 组件并从那里传递auth 是否可以，或者我应该从其他地方传递，也许连接每个需要它的组件并从那里阅读？此外，这种方法将如何处理嵌套路由，例如/dashboard/settings？谢谢

【问题讨论】：

如果父母不需要知道PrivateRoute是如何工作的，你可以直接连接PrivateRoute。

@RobertFarley 是的，我会试试的，谢谢！

@RobertFarley 但是如果你连接了很多 PrivateRoute 你会遇到性能问题？

【参考方案1】：

其实在react中使用这种私有路由是可以的，但是要检查两个时刻：

我应该检查一下，您没有 exact 属性，因此您的所有路线（例如 /dashboard/panel1、/dashboard/panel2）都将是私有的

auth.isAuthenticated 路径="/仪表板" 组件=仪表板 />

你会遇到一些连接问题。有一个简单的解决方法：

导出默认连接(mapStateToProps, null, null, 纯：假， )(私有路由);

更多信息在这里： React router private routes / redirect not working

【讨论】：

谢谢，我不知道确切的东西，会试试看。

对不起，我删除了你的答案，这里还是新的