来自 React/Redux 应用程序中组件的权限检查 [英] Permission checks from components in a React/Redux application
问题描述
我正在尝试与一个构建 React 应用程序的团队合作，并试图找出创建高阶"React 组件(一个包装另一个)以结合 Redux 数据执行身份验证的最佳方法存储.
到目前为止，我的方法是创建一个模块，该模块由一个函数组成，该函数根据是否有经过身份验证的用户返回一个新的 React 组件.
导出默认函数 auth(Component) {class Authenticated 扩展 React.Component {//条件逻辑使成为(){const isAuth = this.props.isAuthenticated;返回 (<div>{是身份验证?<组件{...this.props}/>: 空值})}}...返回连接(mapStateToProps)(已认证)；}
这使我团队中的其他人可以轻松指定组件是否需要某些权限.
render() {返回 auth(如果您要执行基于角色的检查，这种方法很有意义，因为您可能只有几个角色.在这种情况下，您只需调用 auth(.
对于基于权限的检查，传递参数变得笨拙.然而，在构建组件时在组件级别指定权限可能是可行的(以及在团队环境中可管理).设置静态方法/属性似乎是一个不错的解决方案，但据我所知，es6 类导出为函数，不会显示可调用方法.
有没有办法访问导出的 React 组件的属性/方法，以便可以从包含的组件访问它们?
onEnter 很棒，并且在某些情况下很有用.但是，以下是一些 onEnter 无法解决的常见身份验证和授权问题:
- 根据 redux 存储数据确定身份验证/授权 (有一些解决方法)
如果商店更新(但不是当前路线)
如果子路由发生变化，请重新检查身份验证/授权受保护路线下方
另一种方法是使用高阶组件.
您可以使用 Redux-auth-wrapper 提供易于阅读的高阶组件，并为您的组件应用身份验证和授权约束.
<小时>要获取子方法，您可以使用:
refs、callback 和 callback from refs要获取子道具，您可以使用:
this.refs.child.props.some 或 compInstance.props.some
方法和道具示例:
class Parent extends Component {构造函数(道具){超级(道具)；this.checkChildMethod=this.checkChildMethod.bind(this);this.checkChildMethod2=this.checkChildMethod2.bind(this);this.checkChildMethod3=this.checkChildMethod3.bind(this);}检查子方法(){this.refs.child.someMethod();控制台日志(this.refs.child.props.test)；}checkChildMethod2(){this._child2.someMethod();控制台日志(this._child2.props.test)；}checkChildMethod3(){this._child3.someMethod();控制台日志(this._child3.props.test)；}使成为(){返回 (<div>家长<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="检查孩子的方法" onClick={this.checkChildMethod}/><input type="button" value="检查childTwo的方法" onClick={this.checkChildMethod2}/><input type="button" value="检查childThree的方法" onClick={this.checkChildMethod3}/>);}}类子扩展组件{一些方法(){console.log('someMethod Child');}使成为(){返回(<div>子</div>)；}}类 ChildTwo 扩展组件 {一些方法(){console.log('来自 ChildTwo 的 someMethod');}使成为(){返回(<div>子</div>)；}}类 ChildThree 扩展组件 {componentDidMount(){this.props.returnComp(this);}一些方法(){console.log('来自 ChildThree 的一些方法');}使成为(){返回(<div>子</div>)；}}
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.
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 />);
}
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).
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.
Is there a way to access the properties/methods of an exported React component such that they can be accessed from a containing component?
onEnter is great, and useful in certain situations. However, here are some common authentication and authorization problems onEnter does not solve:
- Decide authentication/authorization from redux store data (there are some workarounds)
Recheck authentication/authorization if the store updates (but not the current route)
Recheck authentication/authorization if a child route changes underneath the protected route
An alternative approach is to use Higher Order Components.
You can use Redux-auth-wrapper provides higher-order components for easy to read and apply authentication and authorization constraints for your components.
To get child methods you can use:
refs, callback and callback from refsTo get child props you can use:
this.refs.child.props.some or compInstance.props.some
Example for methods and props:
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 应用程序中组件的权限检查的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
