本文介绍了来自React / Redux应用程序中的组件的权限检查的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我正在尝试与构建React应用程序的团队合作,并试图找出创建更高阶React组件(另一个包装另一个组件)的最佳方法,以便与Redux数据一起执行身份验证商店。

I'm trying to work with a team building a React application, and trying to figure out the best way to create a "higher-order" React component (one that wraps another) to perform Authentication in conjunction with the Redux data store.

到目前为止,我的方法是创建一个模块,该模块由一个函数组成,该函数根据是否有经过身份验证的用户返回一个新的React组件。 / p>

My approach thus far has been to create a module that consists of a function that returns a new React component depending on whether or not there is an authenticated user.

export default function auth(Component) {

    class Authenticated extends React.Component {

        // conditional logic

        render(){
            const isAuth = this.props.isAuthenticated;

            return (
                <div>
                    {isAuth ? <Component {...this.props} /> : null}
                </div>
            )
        }
    }

    ...

    return connect(mapStateToProps)(Authenticated);

}

这使我团队中的其他人可以轻松指定组件是否需要某些权限。

This makes it easy for other people on my team to specify whether or not a component requires certain permissions.

render() {
    return auth(<MyComponent />);
}

如果您正在执行基于角色的检查,这种方法是有道理的,就像你一样可能只有几个角色。在这种情况下,您只需拨打 auth(< MyComponent />,admin)

If you are performing role-based checks, this approach makes sense, as you may only have a few roles. In such a case, you could just call auth(<MyComponent />, admin).

传递对于基于权限的检查,参数变得难以处理。但是,在构建组件时(以及在团队环境中可管理),可以在组件级别指定权限。设置静态方法/属性似乎是一个不错的解决方案,但据我所知,es6类导出为函数,它们不会显示可调用方法。

Passing arguments becomes unwieldy for permissions-based checks. It may however be feasible to specify permissions at the component level as the components are being constructed (as well as manageable in a team environment). Setting static methods/properties seems like a decent solution, but, as far as I can tell, es6 classes export as functions, which don't reveal callable methods.

有没有办法访问导出的React组件的属性/方法,以便可以从包含组件访问它们?

推荐答案

onEnter 很棒,在某些情况下非常有用。但是,以下是一些常见的身份验证和授权问题onEnter无法解决:

onEnter is great, and useful in certain situations. However, here are some common authentication and authorization problems onEnter does not solve:


    确定redux存储数据的身份验证/授权()

    如果商店更新(但不是
    当前路线),请重新检查身份验证/授权

    Decide authentication/authorization from redux store data (there aresome workarounds)

    Recheck authentication/authorization if the store updates (but notthe current route)

如果子路线在受保护路线下更改
,则重新检查身份验证/授权

Recheck authentication/authorization if a child route changesunderneath the protected route

替代方案方法是使用高阶组件。

您可以使用 提供更高阶的组件,以便于阅读和应用组件的身份验证和授权约束。

You can use Redux-auth-wrapper provides higher-order components for easy to read and apply authentication and authorization constraints for your components.


    要获得可以使用的子方法: refs,回调和来自refs的回调

要获得子道具,您可以使用: this.refs.child.props.some或compInstance.props.some

To get child props you can use:this.refs.child.props.some or compInstance.props.some

方法和道具示例:

class Parent extends Component {
    constructor(props){
        super(props);
        this.checkChildMethod=this.checkChildMethod.bind(this);
        this.checkChildMethod2=this.checkChildMethod2.bind(this);
        this.checkChildMethod3=this.checkChildMethod3.bind(this);
    }
    checkChildMethod(){
        this.refs.child.someMethod();
        console.log(this.refs.child.props.test);
    }
    checkChildMethod2(){
        this._child2.someMethod();
        console.log(this._child2.props.test);
    }
    checkChildMethod3(){
        this._child3.someMethod();
        console.log(this._child3.props.test);
    }
    render(){
        return (
            <div>
                Parent
                <Child ref="child" test={"prop of child"}/>
                <ChildTwo ref={c=>this._child2=c} test={"prop of child2"}/>
                <ChildThree returnComp={c=>this._child3=c} test={"prop of child3"}/>
                <input type="button" value="Check method of child" onClick={this.checkChildMethod}/>
                <input type="button" value="Check method of childTwo" onClick={this.checkChildMethod2}/>
                <input type="button" value="Check method of childThree" onClick={this.checkChildMethod3}/>
            </div>
        );
    }
}

class Child extends Component {
    someMethod(){
        console.log('someMethod Child');
    }
    render(){
        return (<div>Child</div>);
    }
}
class ChildTwo extends Component {
    someMethod(){
        console.log('someMethod from ChildTwo');
    }
    render(){
        return (<div>Child</div>);
    }
}
class ChildThree extends Component {
    componentDidMount(){
        this.props.returnComp(this);
    }
    someMethod(){
        console.log('someMethod from ChildThree');
    }
    render(){
        return (<div>Child</div>);
    }
}

这篇关于来自React / Redux应用程序中的组件的权限检查的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!

08-18 08:29