Question

我有一个带有一些公共页面的应用程序和一些带有不同菜单的私人页面我使用react-router通过菜单显示我的所有页面

render() {
    return (
      <Provider store={store}>
        <Router>
          <div className="App">
           <MenuPublic />
           <MenuPrivate />

           <Route to='/private' components={Private} />
           <Route to='/private/account' components={PrivateAccount} />

           <Route to='/public' components={Public} />
           <Route to='/public/contact' components={PublicContact} />
        </Router>
      </Provider>
    )
  }

但我有两个不同的（菜单公开，菜单私有），一个用于公共，一个用于私人页面我搜索一个好的架构，在我的所有公共页面和私人页面之间显示我的不同菜单

你有解决方案吗？

由于

Answer 1

基于什么使用户可以看到私有部分（IE：角色）

你可以：

{this.user.role === 'Admin' && <Route to='/private' components={Private} /> }

或：

<Route to='/private' components={this.user.role === 'Admin' ? PrivateComponent : NotAllowedComponent } /> }

Answer 2

您可以创建HOC以进行授权。

即

<Route to='/public' components={Public} />
<Route
      to="/private"
      component={Authorization([
        'ROLE_SUPER_ADMIN',
        'ROLE_ADMIN',
      ])(Private)}
    />

和授权组件如下所示：

import React from 'react';
import { connect } from 'react-redux';
import { object } from 'prop-types';

export default function Authorization(allowedRoles) {
  return WrappedComponent => {
    class WithAuthorization extends React.Component {
      static propTypes = {
        user: object.isRequired,
      };

      render() {
        const { user } = this.props;
        if (
          user &&
          user.roles &&
          allowedRoles.some(r => user.roles.includes(r))
        ) {
          return <WrappedComponent {...this.props} />;
        }
        return <h1>This page is forbidden</h1>;
      }
    }
    return connect(state => ({ user: state.session.sessionService.user }))(
      WithAuthorization,
    );
  };
}

反应公共/私人页面架构菜单

2 个答案: