如果 logged_in 在上下文中为假，如何重定向，否则让我们继续页面

Question

我正在开发一个简单的 ReactJS 应用程序。我想向我的页面添加身份验证，所以我选择了上下文来满足我更简单的要求。我有一个默认情况下为 false 的上下文变量，当有人输入正确的用户名密码时，我将其设置为 true。这一直有效。但是我的页面仍然可以公开访问，所以我发现我需要使用 HOC 添加重定向逻辑。但是我无法理解如何为此任务实施 HOC。

Context.js

    import React from 'react';
     
    export const AppContext = React.createContext(false);

Login.js

    //other imports here
    import { AppContext } from '../context';

    export function LoginPage() {
      //component local state to track username password etc here
      let { loggedIn, toggleLoggedIn } = useContext(AppContext);

      const handleSubmit = (event) => {
      //some irrelevant stuff here
      fetch("/accounts/login", {
        method: 'POST',
        body: JSON.stringify({
          'username': user,
          'password': password
        })})
      .then((response) => {
        if(response.ok) {
          toggleLoggedIn(true);
        }
      else {
        //some irrelevant stuff here
        }....

App.js

    //other components imports here
    import { AppContext } from './context';

    function App() {
      const [loggedIn, toggleLoggedIn] = useState(false);
      return (
        <div className="app">
          <Header className="app-header"/>
          <div className="links">
            <NavLink activeClassName="selected" exact className="link" to="/">Home page</NavLink>
            <NavLink activeClassName="selected" exact className="link" to="/open_alerts/">Open Alerts</NavLink>
            <NavLink activeClassName="selected" exact className="link" to="/backend_ops/">Backend operations</NavLink>
          </div>

          <AppContext.Provider value={{ loggedIn, toggleLoggedIn}}>
            <Switch>
              <Route exact path="/login/">
                <div>
                  <LoginPage />
                </div>
              </Route>
              <Route exact path="/">
                <div className="charts new-line-block">
                  <div className="split left">
                    <AlertsChart />
                  </div>
                  <div className="split right">
                    <RegionCharts />
                  </div>
                </div>
                <br></br>
                <br></br>
              </Route>
              <Route path="/open_alerts/">
                <div className="alerts-table new-line-block">
                  <br></br>
                  <AlertsTable />
                </div>
              </Route>
              ...so on

Answer 1

您可以 return 基于登录状态的路由：

  protectedRoute() {
    return (
      <Switch>
        <Route path="/login" component={LoginPage} />
        <Route exact path="/">
          <div className="charts new-line-block">
            <div className="split left">
              <AlertsChart />
            </div>
            <div className="split right">
              <RegionCharts />
            </div>
          </div>
          <br></br>
          <br></br>
        </Route>
        .... ....
        <Redirect to="/" />
      </Switch>
    );
  }

然后终于

{loggedIn ? (
         protectedRoute()
        ) : (
          <Switch>
            <Route path="/login" component={Login} />
            <Redirect to="/login" />
          </Switch>
        )}

如果 logged_in 在上下文中为假，如何重定向，否则让我们继续页面

how to redirect if logged_in is false in context else let proceed to page

reactjs

react-router

react-context