React Redux 根据用户类型（角色）登录后路由到不同的容器

Question

我正在寻找如何根据用户类型在登录后路由用户的解决方案。我正在使用 React + Redux。我的路由器看起来像：

export default function App() {
  return (
    <AppWrapper>
      <Helmet
        titleTemplate="Test"
        defaultTitle="Test"
      >
        <meta name="description" content="Test jwt" />
      </Helmet>
      <Header />
      <Switch>
        <Route exact path="/" component={HomePage} />
        <Route exact path="/signin" component={LoginPage} />
        <Route exact path="/signup" component={RegisterPage} />
        <ProtectedRoute exact path="/foo" component={UserType1Page} />
        <ProtectedRoute exact path="/bar" component={UserType2Page} />
        <Route path="/" component={NotFoundPage} />
      </Switch>
      <Footer />
    </AppWrapper>
  );
}

我正在使用 JWT 令牌进行授权。现在登录后我只是将用户重定向到 UserTyp1Page 容器：

const response = yield call(request, requestURL, { method: 'POST', body });

if (response.accessToken) {
  // Set the user's credentials
  yield all([call(auth.setToken, response.accessToken)]);
  yield call(forwardTo, '/foo');

也许有人可以向我展示示例或指导如何根据用户类型完成路由目标？

Answer 1

您可以允许基于 accessToken and/or 特定用户类型或角色的某些路由。您需要公开这些值（通过 props 或 state），以便渲染方法可以推断出它们。

<Switch>
    {!props.accessToken &&
        <React.Fragment>
            <Route exact path="/" component={HomePage} />
            <Route exact path="/signin" component={LoginPage} />
            <Route exact path="/signup" component={RegisterPage} />
        </React.Fragment>
    }
    {!!props.accessToken && !!props.userType1
        <ProtectedRoute exact path="/foo" component={UserType1Page} />
    }
    {!!props.accessToken && !!props.userType2
        <ProtectedRoute exact path="/bar" component={UserType2Page} />
    }
    <Route path="/" component={NotFoundPage} />
</Switch>

But how should I forward to some component after login?

您可以在登录后使用history object进行导航。

this.props.history.push('/foo');

如果 history 在组件的 props 中不可用，那么您可以使用 withRouter 来公开它。

import { withRouter } from 'react-router'

class MyComponent extends Component {
    afterLogin = () => {
        this.props.history.push('/foo');
    }
}

export default withRouter(MyComponent);

Answer 2

这样查

 const getUserComponent = (type) => {
        const PageComponent = type;
        render <RouteComponent />;
    }
    export default function App({type}) {
        const routePath = getRoutePathByuserType(RouteComponent);
        const PageComponent = getUserComponent(type);
        // ... routes
        <ProtectedRoute exact path="routePath" component={PageComponent} />

React Redux 根据用户类型（角色）登录后路由到不同的容器

React Redux routing to different containers after login according to user type (role)

reactjs

react-router

react-redux

react-boilerplate