Question

我正在使用OIDC redux连接器进行用户状态设置。我有一些需要身份验证的组件。我想使用export default connect(mapStateToProps, mapDispatchToProps)(withAuth(Component));之类的东西，并从身份验证服务中的状态请求数据。

import React, { Component } from 'react';
import { connect } from 'react-redux'
import { push } from 'connected-react-router'

export const withAuth = (Component) => {
    return props => {


        return <Component {...props} />
    }
}

是否可以在render函数中获取状态？因此，如果没有用户登录，我可以检查用户beinig登录并重定向到登录页面？

顺便说一句：我将如何重定向？我曾尝试使用redirect-router-dom和<Redirect />，但随后它抱怨设置状态更改得太频繁了……但这可能是我的错误。呈现重定向时，出现此错误：Error: Maximum update depth exceeded.

Answer 1

如果我理解正确，您想使用其他逻辑“修饰”您的组件以处理身份验证重定向吗？

我建议在此处使用“装饰器”模式，例如：

.h5

然后，当您需要此功能时，您可以执行以下操作：

export const withAuth = (Component) => {
    const mapStateToProps = (state, ownProps) => ({
        authenticated: state.authenticated // Or what you need to do to determine this
    });

    return connect(mapStateToProps)(class extends React.Component {
        render() {
            const { authenticated, ...componentProps } = props; 
            if (authenticated) {            
               return <Component {...componentProps }>;
            }
            return <Redirect to="/login" />;
        }
    });
}

Answer 2

弄清楚了，我改变了商店，所以它没有返回函数，而是返回了对象。因此，我可以加载所有js文件。它可能不是最佳解决方案。如果有更好的方法来存储代码，我很想听听如何做到这一点。我在很多示例中都发现了configurestore函数。

import { store } from '../configureStore';

使用store.getState()可以获取当前状态。

我遇到的重定向问题类似于：How to use react-transition-group with react-router-dom

如何将状态传递给React JS高阶组件

2 个答案: