基于用户角色的 React Router V4 重定向

Question

我有两种类型的用户 isEmployer 和 isCandidate。当我登录时，我的应用程序应该检查用户的 role，然后加载适当的路由并重定向到适当的登录页面。这一切似乎都正常工作，但是如果用户角色 isCandidate，则路由仅在 login 或 registration 上重定向。如果用户 isEmployer 页面不会改变，但导航栏中的导航选项会改变。

我看不到我在这里遗漏了什么。有帮助吗？

路径：App.jsx

const App = appProps => (
  <Router>
    <ScrollToTop>
      <div className="bgColor">
        <NavBar {...appProps} />
        <Grid className="main-page-container">
          <Switch>
            {/* candidate routes */}
            <IsCandidate exact path="/candidate" component={CandidateProfileContainer} {...appProps} />

            {/* employer routes */}
            <IsEmployer exact path="/employer/dashboard" component={EmployerDashboardContainer} {...appProps} />


            {/* IsPublic routes */}
            <IsPublic exact path="/register" component={Register} {...appProps} />
            <IsPublic exact path="/login" component={Login} {...appProps} /> {/* Page not found */}
            <Route render={function () {
              return <p>Page not found</p>;
            }}
            />
          </Switch>
        </Grid>
      </div>
    </ScrollToTop>
  </Router>
);

App.propTypes = {
  loggingIn: PropTypes.bool,
  isCandidate: PropTypes.bool,
  isEmployer: PropTypes.bool
};

export default withTracker(() => {
  const loggingIn = Meteor.loggingIn();
  return {
    loggingIn,
    isCandidate: !loggingIn && !!Meteor.userId() && !!Roles.userIsInRole(Meteor.userId(), 'isCandidate'),
    isEmployer: !loggingIn && !!Meteor.userId() && !!Roles.userIsInRole(Meteor.userId(), 'isEmployer')
  };
})(App);

路径：isEmployer.jsx

import React from 'react';
import PropTypes from 'prop-types'; // ES6
import { Route, Redirect } from 'react-router-dom';

const IsEmployer = ({ loggingIn, isEmployer, component: Component, ...rest }) => (
  <Route
    {...rest}
    render={(props) => {
      if (loggingIn) return <div />;
      return isEmployer ?
      (<Component loggingIn={loggingIn} isEmployer={isEmployer} {...rest} {...props} />) :
      (<Redirect to="/login" />);
    }}
  />
);

IsEmployer.propTypes = {
  loggingIn: PropTypes.bool,
  isEmployer: PropTypes.bool,
  component: PropTypes.func
};

export default IsEmployer;

路径：isCandiate.jsx

import React from 'react';
import PropTypes from 'prop-types'; // ES6
import { Route, Redirect } from 'react-router-dom';

const IsCandidate = ({ loggingIn, isCandidate, component: Component, ...rest }) => (
  <Route
    {...rest}
    render={(props) => {
      if (loggingIn) return <div />;
      return isCandidate ?
      (<Component loggingIn={loggingIn} isCandidate={isCandidate} {...rest} {...props} />) :
      (<Redirect to="/login" />);
    }}
  />
);

IsCandidate.propTypes = {
  loggingIn: PropTypes.bool,
  isCandidate: PropTypes.bool,
  component: PropTypes.func
};

export default IsCandidate;

Answer 1

我认为您可以传入一个函数，该函数 return 是适合每个用户状态的组件例如 component= { () => {一些逻辑来确定哪个用户然后 return 适当的组件} } 这有意义吗？

我认为这是一种实现，不确定它是否是最好的

显然，该应用程序会跟踪用户的状态，w.e 您使用 flux 或 redux 等全局状态容器。

基于用户角色的 React Router V4 重定向

React Router V4 redirect based on user role

meteor

reactjs

react-router-v4