Redirect to different routes based on user role after login in react

Question

I have a react app having a login page. I have total 7 user roles. on entering login credetials and hitting login button, I am able to fetch user role from backend(nodejs) and send it as a response to login page in frontend. I want to redirect the user to their corresponding landing page route after login based on their roles.

How can I achieve this?

I tried this

.then(() => {
    if (currentUser.roles[0] === "ROLE_STUDENT") {
      props.history.push("/student");
      window.location.reload();
    } else if (currentUser.roles[0] === "ROLE_TEACHER") {
      props.history.push("/teacher");
      window.location.reload();
    } else if (currentUser.roles[0] === "ROLE_CLASS_TEACHER") {
      props.history.push("/class_teacher");
      window.location.reload();
    } else if (currentUser.roles[0] === "ROLE_PRINCIPAL") {
      props.history.push("/principal");
      window.location.reload();
    } else if (currentUser.roles[0] === "ROLE_ACCOUNT") {
      props.history.push("/account");
      window.location.reload();
    } else if (currentUser.roles[0] === "ROLE_ADMIN") {
      props.history.push("/admin");
      window.location.reload();
    } else if (currentUser.roles[0] === "ROLE_MASTER") {
      props.history.push("/master");
      window.location.reload();
    } else {
      props.history.push("/");
      window.location.reload();
    }
  })

But getting empty screen even after routing screenshot after login

Here are routes defined

 <MenuState>
    <Router>
      <Switch>
        <Route exact path="/" component={Login} />
        <Route exact path="/register" component={Register} />
        <Route exact path="/forgot" component={ForgotPassword} />
        <Route exact path="/student" component={Student} />
        <Route exact path="/teacher" component={TeacherLayout} />
        <Route exact path="/principal" component={PrincipalLayout}></Route>
        <Route exact path="/accounts" component={AccountsLayout}></Route>
        <Redirect to="/" />
      </Switch>
    </Router>
  </MenuState>

@CptSosen tried your suggetion, still same issue . empty screen — Manish, Jun 23 '22 at 14:31
What versions of `react`, `react-router` and/or `react-router-dom` are installed? Please check by running `npm list react react-router react-router-dom` from the project's root directory and report back. Also, why are you using `window.location.reload`? That's probably causing some issue. — Drew Reese, Jun 23 '22 at 15:05
@DrewReese I am using react^18.1.0 and react-router-dom^5.3.0 — Manish, Jun 24 '22 at 05:39
Does this answer your question? https://stackoverflow.com/a/71833424/8690857 — Drew Reese, Jun 24 '22 at 05:40
@DrewReese hey , you are right, this was the problem with react-router-dom version . Problem is solved by upgrading react-router-dom to v5.3.3. Thanks a lot — Manish, Jun 24 '22 at 06:26

Yaxi_ZH · Answer 1 · 2022-06-23T14:51:21.573

0

You could try something like below and delete the whole .then()

 <MenuState>
    <Router>
      <Switch>
        <Route exact path="/" component={Login} />
        {currentUser.roles[0] === "ROLE_STUDENT" && <Redirect exact from="/" to="/student" />}
        {currentUser.roles[0] === "ROLE_STUDENT" && <Route exact path="/student" component={Student} />}
        ... ...
        <Redirect to="/" />
      </Switch>
    </Router>
  </MenuState>

edited Jun 23 '22 at 14:51

answered Jun 23 '22 at 14:48

Yaxi_ZH

26
3

I got this error by applying above suggestion, Pls suggest. Uncaught TypeError: Cannot read properties of null (reading 'roles') – Manish Jun 24 '22 at 05:13
Can you get `currentUser` in this component? The error means the value of `currentUser` is null when rendering the component. You'll need to add a loader while fetching currentUser or at least use `currentUser?.roles[0]` – Yaxi_ZH Jun 24 '22 at 19:15
thanks for your help. Actually the problem was with the react-router-dom version, and was resolved by applying the solution provided by DrewReese in the above comment section. – Manish Jun 25 '22 at 04:30

Redirect to different routes based on user role after login in react

1 Answers1