首頁  >  問答  >  主體

建立受保護的路由:使用react-router-dom的方法指南

<p>如何使用<code>react-router-dom</code>建立受保護的路由,並將回應儲存在localStorage中,以便使用者下次開啟時可以再次查看他們的詳細資料。登入後,他們應該重定向到儀表板頁面。 </p> <p>所有功能都加入在ContextApi中。Codesandbox連結:代碼

<p>我嘗試過,但無法實作</p>

路由頁面

<pre class="brush:php;toolbar:false;">從「react」匯入 React, { useContext }; 從“./context”導入{globalC}; 從「react-router-dom」匯入{路由、交換器、BrowserRouter}; 從“./About”導入關於; 從“./Dashboard”導入儀表板; 從“./Login”匯入登入名; 從“./PageNotFound”導入PageNotFound; 函數路線(){ const { authLogin } = useContext(globalC); console.log("authLogin", authLogin); 返回 ( <瀏覽器路由器> <開關> {驗證登入? ( <> <路線路徑=“/儀表板”組件= {儀表板}精確/> /> <路線確切路徑=“/關於”元件= {關於} /> </> ) : ( <路由路徑=“/”元件={登入}精確/>> )} <路由元件={PageNotFound} /> </切換> </瀏覽器路由器> ); } 導出預設路由;</pre>

上下文頁面

從「react」匯入 React, { Component, createContext };
從“axios”導入 axios;

匯出 const globalC = createContext();

導出類別 Gprov 擴充組件 {
  狀態={
    授權登入:空,
    authLogin錯誤:空
  };
  組件DidMount() {
    var localData = JSON.parse(localStorage.getItem("loginDetail"));
    如果(本地資料){
      this.setState({
        authLogin:本地數據
      });
    }
  }

  登入資料 = async() => {
    讓有效負載= {
      令牌:“ctz43XoULrgv_0p1pvq7tA”,
      數據: {
        名稱:“名字第一”,
        電子郵件:“互聯網電子郵件”,
        電話:“電話主頁”,
        _重複:300
      }
    };
    等待 axios
      .post(`https://app.fakejson.com/q`,有效負載)
      .then((res) => {
        if (res.status === 200) {
          this.setState({
            authLogin:res.data
          });
          localStorage.setItem("loginDetail", JSON.stringify(res.data));
        }
      })
      .catch((錯誤) =>
        this.setState({
          授權登入錯誤:錯誤
        })
      );
  };
  使成為() {
    // console.log(localStorage.getItem("loginDetail"));
    返回 (
      
        {this.props.children}
      
    );
  }
}</前>
<p><br />></p>
P粉596191963P粉596191963445 天前463

全部回覆(2)我來回復

  • P粉253518620

    P粉2535186202023-08-25 09:42:47

    對於v6:

    import { Routes, Route, Navigate } from "react-router-dom";
    
    function App() {
      return (
        <Routes>
          <Route path="/public" element={<PublicPage />} />
          <Route
            path="/protected"
            element={
              <RequireAuth redirectTo="/login">
                <ProtectedPage />
              </RequireAuth>
            }
          />
        </Routes>
      );
    }
    
    function RequireAuth({ children, redirectTo }) {
      let isAuthenticated = getAuth();
      return isAuthenticated ? children : <Navigate to={redirectTo} />;
    }

    文件連結: https://gist.github.com/mjackson/d54b40a094277b7afdd6b81f51a0393f

    回覆
    0
  • P粉505917590

    P粉5059175902023-08-25 00:11:28

    問題

    <BrowserRouter>
      <Switch>
        {authLogin ? (
          <>
            <Route path="/dashboard" component={Dashboard} exact />
            <Route exact path="/About" component={About} />
          </>
        ) : (
          <Route path="/" component={Login} exact />
        )}
    
        <Route component={PageNotFound} />
      </Switch>
    </BrowserRouter>

    Switch除了RouteRedirect元件之外,不會處理其他任何渲染。如果您想要像這樣“嵌套”,那麼您需要將每個元件包裝在通用路由中,但這是完全不必要的。

    您的登入元件尚未處理重定向回原來存取的「首頁」或私人路由。

    解決方案

    react-router-dom v6

    在版本6中,自訂路由元件已經不再受歡迎,首選方法是使用auth佈局元件。

    import { Navigate, Outlet } from 'react-router-dom';
    
    const PrivateRoutes = () => {
      const location = useLocation();
      const { authLogin } = useContext(globalC);
    
      if (authLogin === undefined) {
        return null; // 或者加载指示器/旋转器等
      }
    
      return authLogin 
        ? <Outlet />
        : <Navigate to="/login" replace state={{ from: location }} />;
    }

    ...

    <BrowserRouter>
      <Routes>
        <Route path="/" element={<PrivateRoutes />} >
          <Route path="dashboard" element={<Dashboard />} />
          <Route path="about" element={<About />} />
        </Route>
        <Route path="/login" element={<Login />} />
        <Route path="*" element={<PageNotFound />} />
      </Routes>
    </BrowserRouter>

    const routes = [
      {
        path: "/",
        element: <PrivateRoutes />,
        children: [
          {
            path: "dashboard",
            element: <Dashboard />,
          },
          {
            path: "about",
            element: <About />
          },
        ],
      },
      {
        path: "/login",
        element: <Login />,
      },
      {
        path: "*",
        element: <PageNotFound />
      },
    ];

    ...

    export default function Login() {
      const location = useLocation();
      const navigate = useNavigate();
      const { authLogin, loginData } = useContext(globalC);
    
      useEffect(() => {
        if (authLogin) {
          const { from } = location.state || { from: { pathname: "/" } };
          navigate(from, { replace: true });
        }
      }, [authLogin, location, navigate]);
    
      return (
        <div
          style={{ height: "100vh" }}
          className="d-flex justify-content-center align-items-center"
        >
          <button type="button" onClick={loginData} className="btn btn-primary">
            登录
          </button>
        </div>
      );
    }

    react-router-dom v5

    建立一個消費您的auth上下文的PrivateRoute元件。

    const PrivateRoute = (props) => {
      const location = useLocation();
      const { authLogin } = useContext(globalC);
    
      if (authLogin === undefined) {
        return null; // 或者加载指示器/旋转器等
      }
    
      return authLogin ? (
        <Route {...props} />
      ) : (
        <Redirect
          to={{
            pathname: "/login",
            state: { from: location }
          }}
        />
      );
    };

    更新您的Login元件以處理重定向回原來存取的路由。

    export default function Login() {
      const location = useLocation();
      const history = useHistory();
      const { authLogin, loginData } = useContext(globalC);
    
      useEffect(() => {
        if (authLogin) {
          const { from } = location.state || { from: { pathname: "/" } };
          history.replace(from);
        }
      }, [authLogin, history, location]);
    
      return (
        <div
          style={{ height: "100vh" }}
          className="d-flex justify-content-center align-items-center"
        >
          <button type="button" onClick={loginData} className="btn btn-primary">
            登录
          </button>
        </div>
      );
    }

    將所有路由渲染為「扁平清單」

    function Routes() {
      return (
        <BrowserRouter>
          <Switch>
            <PrivateRoute path="/dashboard" component={Dashboard} />
            <PrivateRoute path="/About" component={About} />
            <Route path="/login" component={Login} />
            <Route component={PageNotFound} />
          </Switch>
        </BrowserRouter>
      );
    }

    回覆
    0
  • 取消回覆