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

Question

我正在学习使用 React JS。 我有以下页面。

• 家
• 登录
• 笔记
• 创建笔记

我的情况如下。

1. 无需登录即可访问首页
2. 未登录无法访问注释和创建注释

如何使上述情况起作用？ 这是我制作的代码片段：

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 作为入口主页

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;

路由.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;

现在我正在像这样在 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} />;
    }
}

我不想在 NoteCreate 组件中重复我自己？ 它非常感谢任何建议。

Answer 1

就像开始的注释一样，不确定您使用哪些资源来学习 React，但到目前为止，我强烈建议您查看一门现代课程，该课程使用 Hooks 教授 React ，除了获取错误边界（使用react- error-boundary ) 没有理由编写 class 组件。

关于手头的问题，您没有特别提到任何错误，所以这似乎是一个问题“我应该如何处理这个问题”而不是实际修复一些东西？ 让我知道是否存在特定错误，我会尝试调整我的答案以提供进一步帮助。

我建议将您在 Note 组件中的逻辑重构为自身的组件，以便您可以用它来包装您的路由。 将有关它们是否已通过身份验证的信息存储到context 中，然后使用该上下文提供程序包装您的路由，以便您可以在子组件中使用该上下文，而无需在每个页面上重复该逻辑。

Answer 2

您需要创建一个RouterWithAuth组件并使用它而不是直接使用Router ，如下所示：

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>;
    }
  }
}

创建RouteWithAuth的一种更简洁的方法可能是使用React Function Component ，如下所示：

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>;
  }
}