Question

我有四种不同的布局。

HomeLayout - 主页
AdminLayout
UserLayout
AgentLayout

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));

AdminLayout

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

export default Redirection()(AdminLayout);

我从localStorage获得的user_role为JSON.parse(localStorage.getItem("user"))['userInfo]['user_role']

Answer 1

您可以使用lodash intersection执行此操作。这是它的链接

https://lodash.com/docs/4.17.4#intersection

在您的情况下，检查将在

之后

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

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

允许用户仅访问他/她的信息中心

1 个答案: