Question

我有两种类型的用户isEmployer和isCandidate。当我登录时，我的应用程序应该检查用户的role，然后加载适当的路由加上重定向到相应的登录页面。这一切似乎都正常工作，但是如果用户角色login，路由仅在registration或isCandidate上重定向。如果用户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

我认为您可以传入一个函数，该函数返回一个对每个用户状态都正确的组件例如component = {（）=＆gt; {确定哪个用户然后返回适当的组件的一些逻辑}} 这有意义吗？

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

显然，应用程序将跟踪用户的状态，即使用flux或redux等的全局状态容器。

根据用户角色重新激活路由器V4重定向

1 个答案: