我正在尝试与构建React应用程序的团队合作，并试图找出创建＆＃34;更高阶的＆＃34; React组件（包装另一个组件）与Redux数据存储一起执行身份验证。
到目前为止，我的方法是创建一个模块，该模块由一个函数组成，该函数根据是否有经过身份验证的用户返回一个新的React组件。
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);
}
这使我的团队中的其他人可以轻松指定组件是否需要特定权限。
render() {
return auth(<MyComponent />);
}
如果您正在执行基于角色的检查，这种方法很有意义，因为您可能只有几个角色。在这种情况下，您只需拨打auth(<MyComponent />, admin)。
传递参数对于基于权限的检查变得不实用。但是，在构建组件时（以及在团队环境中可管理），可以在组件级别指定权限。设置静态方法/属性似乎是一个不错的解决方案，但据我所知，es6类导出为函数，它们不会显示可调用方法。
有没有办法访问导出的React组件的属性/方法，以便可以从包含组件访问它们？
答案 0 :(得分：2)
onEnter 很棒，在某些情况下非常有用。但是，以下是一些常见的身份验证和授权问题onEnter无法解决：
如果商店更新，则重新检查身份验证/授权（但不是 当前路线）
如果子路由发生更改，请重新检查身份验证/授权 在受保护的路线下面
另一种方法是使用高阶组件。
您可以使用 Redux-auth-wrapper提供更高阶的组件，以便于阅读和应用组件的身份验证和授权限制。
要获得可以使用的子方法：refs, callback and callback from refs
要获得儿童道具，您可以使用：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>);
}
}
答案 1 :(得分：2)
这似乎是一个非常有趣的可能性。我遇到了同样的问题，这是一个新的库，因此我认为将其链接不会受到任何伤害，以防其他人受到帮助。我还不确定我是否要自己走这条路线，因为距离Google-palooza 15分钟路程。叫做CASL。
Link to the Article Explaining the Library
每个请求来自库的示例代码：
if (ability.can('delete', post)) {
<button onClick={this.deletePost.bind(this}>Delete</button>
}
替换为：
if (user.role === ADMIN || user.auth && post.author === user.id) {
<button onClick={this.deletePost.bind(this}>Delete</button>
}
作者在文章中进一步介绍了一个自定义组件，以获取：
<Can run="delete" on={this.props.todo}>
<button onClick={this.deleteTodo.bind(this}>Delete</button>
</Can>
从根本上讲，它使开发人员可以在代码中更具声明性，以便于使用和维护。
答案 2 :(得分：1)
如果您使用CREATE OR REPLACE TRIGGER ref_upd_user_phi_details
AFTER
INSERT OR UPDATE --of emp_email_address, ssn_nb
ON ref_adp_employees
REFERENCING OLD AS OLD NEW AS NEW
FOR EACH ROW
BEGIN
UPDATE ref_adp_employees
SET emp_email_address = 'QA_' ||emp_email_address,
ssn_nb = nvl2(ssn_nb, NULL, '123-45-6789')
WHERE upper(emp_email_address) NOT LIKE 'QA_%'
AND upper(emp_email_address) LIKE '%@KEENAN.COM';
exception
WHEN others
THEN
NULL;
END;
，建议的处理授权方式是通过react-router组件中的onEnter属性。
Route请参阅docs。
这也是你问题的答案：
有没有办法访问导出的React组件的属性/方法，以便可以从包含的组件访问它们？
所以只需将它们设为静态属性/方法（如Component.onEnter）。
答案 3 :(得分：1)
我找到了一篇文章here，我在这里写的是要点。 您可以像这样添加道具
<Route path="/" component={App}>
//BOD routes
<Route authorisedUsers={['KR']} path="/home" component={HomeContainer} />
//HR routes
<Route authorisedUsers={['HR']} path="/hrhome" component={HRDashboardContainer} />
//common routes
<Route authorisedUsers={['KR', 'HR']} path="/notes" component={NotesContainer} />
然后在组件中添加以下代码，这些代码在path =＆＃39; /＆＃39;上呈现
Role based routing react redux
componentDidUpdate() {
const {
children, //Component to be rendered (HomeContainer if route = '/home')
pathname: {location}, //location.pathname gives us the current url user is trying to hit. (with react router)
profileId, //profileId required by profile page common to all user journeys.
role } = this.props;
this.reRoute(role, this.props.children, location.pathname, ProfileId)
}
decideRoute(role, ProfileId) { //decide routes based on role
if(role==='HR')
return 'hrhome';
else if(role==='KR')
return 'home';
else if(role==='USER'&&ProfileId)
return 'profile/'+ProfileId;
else
return '/error';
}
isAuthorised(authorisedUsers, role) {
return _.includes(authorisedUsers, role)
}
reRoute(role, children, path, ProfileId) {
if(role===null && path!=='/') // user hit a different path without being authenticated first
{
hashHistory.replace('/'); //this is where we implemented login
return;
}
let route = this.decideRoute(role, ProfileId) //if role has already been fetched from the backend, use it to decide the landing page for each role.
if(children) // if we already are on one of the user journey screens ...
{
const authorisedUsers = children.props.route.authorisedUsers
if(!this.isAuthorised(authorisedUsers,role)) //... and the user is not allowed to view this page...
hashHistory.replace(`/${route}/`); //... redirect him to the home page corresponding to his role.
}
else
hashHistory.replace(`/${route}/`); // if the user has just logged in(still on / page or login page), and we know his role, redirect him to his home page.
}//if none of these holds true, user is allowed to go ahead and view the page
这实质上增加了一个网关检查，可以对所有容器起作用，并根据您的角色指导您。此外，如果您以某种方式查找错误的网址，它将不允许您访问。
答案 4 :(得分：1)
对于在开源项目中寻求快速修复的任何人，您都可以尝试使用react-permissible。