React JS - 重定向到除主页以外的登录

Question

I'm learning to use React JS. I have the following page.

• Home
• Login
• Note
• Create Note

My case is as follows.

1. Home can be accessed without logging in
2. Note and create notes cannot be accessed without logging in

How to make the case above work? Here's the code snippet I made:

index.js

import App from "./App";
import * as serviceWorker from "./serviceWorker";

ReactDOM.render(
  <BrowserRouter> // from "react-router-dom"
    <App />
  </BrowserRouter>,
  document.getElementById("root")
);

serviceWorker.unregister();

App.js as entry home page

import React, { Component } from "react";
import AuthService from "./services/auth.service";
import Routes from "./config/routes";
// Lot of import bootstrap dan font-awesome and css


class App extends Component {
  constructor(props) {
    super(props);
    this.logOut = this.logOut.bind(this);

    this.state = {
      currentUser: undefined,
      backendSupportInformation: undefined,
    };
  }

  componentDidMount() {
    const user = AuthService.getCurrentUser();
    if (user) {
      this.setState({
        currentUser: user,
        backendSupportInformation: user.backend,
      });
    }
  }

  logOut() {
    AuthService.logout();
  }

  render() {
    const { currentUser, backendSupportInformation } = this.state;
    return (
      <div>
        <header>
          <nav className="navbar navbar-expand-sm navbar-dark bg-dark">
            // some of link here
          </nav>
        </header>

        <main role="main" className="container-fluid mt-3">
          <Routes /> // use react-route-dom
        </main>

      </div>
    );
  }
}

export default App;

Routes.js

import React from "react";
import { Route, Switch } from "react-router-dom";

const Routes = () => {
  return (
    <Switch>
      <Route exact path={["/", "/home"]} component={Home} />
      <Route exact path="/login" component={Login} />
      <Route exact path="/note" component={Note} />
      <Route exact path="/note/create" component={NoteCreate} />
      <Route exact path="/profile" component={Profile} />
    </Switch>
  );
};

export default Routes;

Now i am doing in NoteComponent like this.

NoteComponent

export default class Note extends Component {
  state = {
    redirect: null,
    userReady: false,
  };
  
  componentDidMount() {
    const currentUser = AuthService.getCurrentUser();
    
    if (!currentUser) this.setState({ redirect: "/home" });
    this.setState({ currentUser: currentUser, userReady: true });

    this.retrieveAll();
  }

  render() {
    if (this.state.redirect) {
      
      // pass message that you need login first to access this note page
      return <Redirect to={this.state.redirect} />;
    }
}

I dont want to repeat my self into NoteCreate Component? Any advice it so appreciated.

Answer 1

Just as a note to start, not sure which resources you're using to learn React, but as of now I would highly recommend you look into a modern course which teaches React with Hooks , aside from to get error boundaries (which with react-error-boundary ) there is no reason to be writing class components.

Regarding the issue at hand, you didn't specifically mention any errors so this seems to be a question of "how should I go about this" as opposed to actually fixing something? Let me know if theres specific errors and I'll try to adjust my answer to help further.

I would recommend refactoring the logic you have in your Note component into a component of itself, so that you can wrap your routes with it. Store the information for whether they're authenticated into a context , and then wrap your routes with that context provider so you can consume that context in your child components, without duplicating that logic on each page.

Answer 2

You need to create a RouterWithAuth Component and use that instead of using Router directly, something like this:

export default class RouteWithAuth extends Component {
  state = {
    redirect: null,
    userReady: false,
  };

  componentDidMount() {
    const currentUser = AuthService.getCurrentUser();

    if (!currentUser) this.setState({ redirect: "/home" });
    this.setState({ currentUser: currentUser, userReady: true });

    this.retrieveAll();
  }

  render() {
    const { redirect, userReady } = this.state;

    if (redirect) {
      // pass message that you need login first to access this note page
      return <Redirect to={this.state.redirect} />;
    } else if (userReady) {
      return (
        <Route
          exact={props.exact}
          path={props.path}
          component={props.component}
        />
      );
    } else {
      return <div>Loading....</div>;
    }
  }
}

which a cleaner way of creating RouteWithAuth might be to use React Function Component like this:

export default function RouteWithAuth() {
  const [redirect, setRedirect] = useState(null);
  const [userReady, setUserReady] = useState(false);

  useEffect(() => {
    const currentUser = AuthService.getCurrentUser();

    if (!currentUser) {
      setRedirect("/home");
      return;
    }

    //Do Something with the currentUser such as storing it in redux store or in context for later use cases
    setUserReady(true);
  }, []);

  if (redirect) {
    return <Redirect to={redirect} />;
  } else if (userReady) {
    return (
      <Route
        exact={props.exact}
        path={props.path}
        component={props.component}
      />
    );
  } else {
    return <div>Loading....</div>;
  }
}