0

我有四种不同的布局。

  • 主页布局 - 主页

  • 管理布局

  • 用户布局

  • 代理布局

AdminLayout 是管理相关页面的父级，UserLayout 是用户相关等的父级。我使用高阶组件来检查用户是否未经身份验证，将它们重定向到主页。还有一个条件。也就是说，如果用户经过身份验证，但如果用户的角色不是管理员并且用户尝试访问 AdminDashboard，他/她应该被重定向到主页，并且与其他人类似。但是 Agent 可以访问 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));

管理布局

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']

4

1 回答 1

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 文档，因为它对你很有帮助

于 2017-07-09T08:23:58.280 回答