Javascript 仅允许用户访问其仪表板

我有四种不同的布局

• 主页布局-主页

• 管理布局

class AdminLayout extends React.Component {
  render() {
    return (
      <div>
        {this.props.children}
      </div>
    );
  }
}

export default Redirection()(AdminLayout);

• 用户布局

• 代理权

AdminLayout是与管理员相关的页面的父级，而UserLayout是用户的父级 相关的等等。我使用了高阶组件来检查 用户未经身份验证，请将其重定向到主页。还有另外一个条件。也就是说，如果用户已通过身份验证，但如果用户的角色不是管理员，并且用户尝试访问AdminDashboard，则应将其重定向到主页，并与其他用户类似。但代理可以访问UserDashboard

我得到的角色是形式

user_role = ['superadmin'] or ['enduser'] or ['agent'] or 
['enduser', 'agent'].

除了代理可以访问代理仪表板和用户仪表板外，不应访问其他仪表板。对于未经验证的用户，我可以在访问仪表板时重定向到主页，而无需登录

重定向到未经身份验证的用户的代码正在工作，我已按以下方式完成

const Redirection = prop => WrappedComponent => {
  return class Redirection extends React.PureComponent {
    render() {
      const user_instance = JSON.parse(localStorage.getItem("user"));
      if (!user_instance) {
        return <Redirect to="/" />;
      } else {
        return <WrappedComponent {...this.props} />;
      }
    }
  };
};

export default props => WrappedComponent =>
  connect(null, mapDispatchToProps)(Redirection(props)(WrappedComponent));

const Redirection=prop=>WrappedComponent=>{
返回类重定向扩展了React.PureComponent{
render（）{
const user_instance=JSON.parse（localStorage.getItem（“用户”）；
if（！user_实例）{
回来
}否则{
回来
}
}
};
};
导出默认道具=>WrappedComponent=>
连接（null，mapDispatchToProps）（重定向（props）（WrappedComponent））；

管理布局

class AdminLayout extends React.Component {
  render() {
    return (
      <div>
        {this.props.children}
      </div>
    );
  }
}

export default Redirection()(AdminLayout);

类AdminLayout扩展了React.Component{ render（）{ 返回( {this.props.children} ); } } 导出默认重定向（）（AdminLayout）；

---

我从localStorage获得的用户角色为

JSON.parse（localStorage.getItem（“用户”））['userInfo]['user\u role']

您可以使用lodash

交叉点来实现这一点。这里是它的链接


在您的情况下，支票如下所示

if (
        user_instance &&
        intersection(prop, user_instance["userInfo"]["user_role"])
          .length > 0
      ) {
        return <WrappedComponent {...this.props} />;
      } else {
        return <Redirect to="/" />;
      }

if(
用户实例&&
交叉点（道具，用户实例[“用户信息”][“用户角色”]）
.长度>0
) {
回来
}否则{
回来
}

你可以粘贴下面的代码片段，也不要忘了检查lodash文档，因为它会对你很有帮助