javascript - What's the proper way to redirect with React routing when a user is not logged into the application? - Stac

admin管理员组

文章数量:1417691

In a React SPA, I have a collection of "pages" under the /src/pages/ folder.

The entry point page is an index.js file under the /src/ folder, where I define a router const like this:

const routing = (
  <Router>
    <div>
      <Switch>
        <Route path="/signIn" ponent={SignIn} />
        <Route exact path="/" ponent={Homepage} />
        <Route path="/page1" ponent={Page1} />
        <Route path="/page2" ponent={Page2} />
        <Route path="/page3" ponent={Page3} />
        <Route ponent={NotFound} />
      </Switch>
    </div>
  </Router>

It works great and all. All pages are navigable like "" and it will render the Page2 React ponent.

Concerns arise when I incorporate user session management (log in, log out). If a user is not logged in the app, all pages should automatically redirect to the /signIn page. And viceversa, if a user is already logged, if the /signIn page is accessed, it should automatically redirect to the root homepage.

Right now I have implemented this by adding the following code to all the pages, right after the render() method is declared in the ponent, like this:

class Page2 extends React.Component {
  render() {
    if (UserProfile.getUserSessionStatus() !== "logged") {
      this.props.history.push("/signIn");
    }
  }

  return (
    JSX code to be rendered here...
    ...

This works, but it feels like a cheap workaround used by someone who is just learning React, not by a professional.

For a proof of concept it works, but I would never dare to use such a thing in a production environment.

So, what's the right, best-practices-aligned way to acplish this?

In a React SPA, I have a collection of "pages" under the /src/pages/ folder.

The entry point page is an index.js file under the /src/ folder, where I define a router const like this:

const routing = (
  <Router>
    <div>
      <Switch>
        <Route path="/signIn" ponent={SignIn} />
        <Route exact path="/" ponent={Homepage} />
        <Route path="/page1" ponent={Page1} />
        <Route path="/page2" ponent={Page2} />
        <Route path="/page3" ponent={Page3} />
        <Route ponent={NotFound} />
      </Switch>
    </div>
  </Router>

It works great and all. All pages are navigable like "https://mysuperapp./page2" and it will render the Page2 React ponent.

Concerns arise when I incorporate user session management (log in, log out). If a user is not logged in the app, all pages should automatically redirect to the /signIn page. And viceversa, if a user is already logged, if the /signIn page is accessed, it should automatically redirect to the root homepage.

Right now I have implemented this by adding the following code to all the pages, right after the render() method is declared in the ponent, like this:

class Page2 extends React.Component {
  render() {
    if (UserProfile.getUserSessionStatus() !== "logged") {
      this.props.history.push("/signIn");
    }
  }

  return (
    JSX code to be rendered here...
    ...

This works, but it feels like a cheap workaround used by someone who is just learning React, not by a professional.

For a proof of concept it works, but I would never dare to use such a thing in a production environment.

So, what's the right, best-practices-aligned way to acplish this?

• javascript
• reactjs
• react-router

Share Improve this question Follow asked Feb 16, 2019 at 12:57 Rikai no hōhōRikai no hōhō 83711 gold badge1010 silver badges1515 bronze badges 1

• Possible duplicate of What is the best way to redirect a page using React Router? – Lesair Valmont Commented Feb 23, 2019 at 13:36

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 5

One possible approach is to create a Higher Order ponent(HOC) and use it for protecting any routes that require login.

const PrivateRoute = ({ ponent: Component, ...rest }) => (
  <Route {...rest} render={(props) => (
    UserProfile.getUserSessionStatus() === "logged"
      ? <Component {...props} />
      : <Redirect to='/login' />
  )} />
)

And then use like this

.....
<PrivateRoute path='/page1' ponent={Page1} />
.......

Hope this helps!

本文标签：