首頁 > web前端 > js教程 > 如何在 React Router DOM v5 和 v6 中實現受保護的路由?

如何在 React Router DOM v5 和 v6 中實現受保護的路由?

Patricia Arquette
發布: 2024-12-21 22:31:07
原創
503 人瀏覽過

How to Implement Protected Routes in React Router DOM v5 and v6?

如何使用 React Router DOM 建立受保護的路由?

問題

此程式碼利用 React Router DOM 並將回應儲存在 localStorage 中,應建立一個受保護的路由,讓使用者在返回頁面後繼續查看其詳細資料。登入後,他們應該被重定向到儀表板頁面,但實現未能實現此目的。

路線頁面

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

import React, { useContext } from "react";

import { globalC } from "./context";

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

import About from "./About";

import Dashboard from "./Dashboard";

import Login from "./Login";

import PageNotFound from "./PageNotFound";

 

function Routes() {

  const { authLogin } = useContext(globalC);

  console.log("authLogin", authLogin);

 

  return (

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

  );

}

 

export default Routes;

登入後複製

上下文頁

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

import React, { Component, createContext } from "react";

import axios from "axios";

 

export const globalC = createContext();

 

export class Gprov extends Component {

  state = {

    authLogin: null,

    authLoginerror: null,

  };

 

  componentDidMount() {

    var localData = JSON.parse(localStorage.getItem("loginDetail"));

    if (localData) {

      this.setState({

        authLogin: localData,

      });

    }

  }

 

  loginData = async () => {

    let payload = {

      token: "ctz43XoULrgv_0p1pvq7tA",

      data: {

        name: "nameFirst",

        email: "internetEmail",

        phone: "phoneHome",

        _repeat: 300,

      },

    };

    await axios

      .post(`https://app.fakejson.com/q`, payload)

      .then((res) => {

        if (res.status === 200) {

          this.setState({

            authLogin: res.data,

          });

          localStorage.setItem("loginDetail", JSON.stringify(res.data));

        }

      })

      .catch((err) =>

        this.setState({

          authLoginerror: err,

        })

      );

  };

 

  render() {

    // console.log(localStorage.getItem("loginDetail"));

  }

}

登入後複製

解決方案

1. React Router DOM v6

在版本6 中,使用auth 版面配置元件而不是自訂路由元件:

1

2

3

4

5

6

7

8

9

10

11

12

13

import { Navigate, Outlet } from 'react-router-dom';

 

const PrivateRoutes = () => {

  const { authLogin } = useContext(globalC);

 

  if (authLogin === undefined) {

    return null; // or loading indicator/spinner/etc

  }

 

  return authLogin

    ? <Outlet />

    : <Navigate to='/login' replace state={{ from: location }} />;

}

登入後複製

更新你的路由:

1

2

3

4

5

6

7

8

9

10

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

登入後複製

2. React Router DOM v5

在版本5 中,建立一個 PrivateRoute 元件:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

const PrivateRoute = (props) => {

  const { authLogin } = useContext(globalC);

 

  if (authLogin === undefined) {

    return null; // or loading indicator/spinner/etc

  }

 

  return authLogin ? (

    <Route {...props} />

  ) : (

    <Redirect

      to={{

        pathname: '/login',

        state: { from: location }

      }}

    />

  );

};

登入後複製

更新您的登入元件:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

export default function Login() {

  const { authLogin, loginData } = useContext(globalC);

  const location = useLocation();

  const history = useHistory();

 

  useEffect(() => {

    if (authLogin) {

      const { from } = location.state || { from: { pathname: '/' } };

      history.replace(from);

    }

  }, [authLogin, history, location]);

 

  return (

    ...

  );

}

登入後複製

更新您的路由:

1

2

3

4

5

6

7

8

9

10

11

12

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>

  );

}

登入後複製

以上是如何在 React Router DOM v5 和 v6 中實現受保護的路由?的詳細內容。更多資訊請關注PHP中文網其他相關文章!

本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
作者最新文章
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板