Reactjs 受保护的路由

介绍

React Router 提供了一种便捷的方式来定义需要身份验证才能访问的受保护路由。默认情况下，这些路由被视为公共路由，任何人都可以访问它们。

要创建受保护的路由，你需要使用 React Router Route 组件并指定要保护的路径。然后，你可以使用 render prop 函数有条件地渲染你想要保护的组件。

如果用户未通过身份验证，他们将被重定向到登录页面。否则，他们将能够访问受保护的路由。

在下一节中，我们将介绍本教程的一些先决条件。

先决条件

完成本教程需要满足以下条件：

了解 JavaScript 和 React。
关于Redux工具包的知识
Nodejs 应该安装在你的系统上。
npm 应该安装在你的系统上。

在下一节中，我们将深入探讨此受保护路线的细节。

关于受保护的路线

在 Web 应用程序中，路由是指确定如何响应客户端对特定 URL 的请求的过程。在 React 中，这通常使用 React Router 库来实现。

React Router 提供了多种方法来配置应用程序如何渲染其支持的不同 URL。你可以指定的选项之一是是否应保护给定的路由。

受保护的路由是指只有经过身份验证的用户才能访问的路由。如果用户尝试访问受保护的路由但未登录，则应将其重定向到登录页面。

在下一节中，我们将讨论在教程中用到的 Redux

理解 Redux 工具包

Redux 是一个用于管理 JavaScript 应用程序状态的工具包。它与 React 和其他框架结合使用。

Redux 提供了一种简化的方式来管理应用程序中的状态更改。它包含一组用于管理 Action、Reducer 和中间件的工具。它还提供了一种将应用程序连接到 Store 的方法。

Redux 是用于管理 JavaScript 应用程序中的状态的出色工具包。

我们将用它来存储我们的用户详细信息。

在下一节中，我们将讨论代码

使用 Reactjs 构建一个简单的网页来演示受保护的路由

在本教程的这一部分，我们将使用 React.js、Redux 工具包和 react-router-dom 构建一个简单的网页，演示受保护的路由。我们的微服务应用的项目目录结构如下所示。

|   .gitignore
|   package-lock.json
|   package.json
|   README.md
|   
+---public
|       favicon.ico
|       index.html
|       logo192.png
|       logo512.png
|       manifest.json
|       robots.txt
|       
\---src
    |   App.js
    |   index.js
    |   
    +---Home
    |       Home.jsx
    |       
    +---Login
    |       Login.jsx
    |       
    +---Redux
    |   |   store.js
    |   |   
    |   \---Slice
    |           Slice.js
    |           
    \---utils
            ProtectedRoute.js

首先，我们需要创建 React 应用程序样板

转到您的终端并运行以下命令：

npx create-react-app protected-route

创建后，在代码编辑器（例如 Visual Studio Code）中打开该文件夹。
从文件夹中删除本教程中不会用到的所有不必要的文件。

安装依赖项

要安装本教程所需的依赖项，请打开代码编辑器的终端并输入以下命令。

npm i react-router-dom react-redux redux

创建主页

创建一个目录，将其命名为 Home，然后在其中有一个文件 Home.jsx，其中包含以下代码。

import React from 'react'

const Home = () => {
  return (
    <div>Home</div>
  )
}

export default Home

创建登录页面

创建一个目录，将其命名为 Home，然后在其中创建一个文件 Login.jsx，其中包含以下代码。

import React from 'react'

const Login = () => {
  return (
    <div>Login</div>
  )
}

export default Login

设置路线

导航到 src 目录中的 app.js 文件并编写以下代码。

import Home from "./Home/Home";
import Login from "./Login/Login";
import {BrowserRouter,Route,Routes} from "react-router-dom";

function App() {
  return (
    <BrowserRouter>
    <Routes>
        <Route path="/" element={<Home/>}/>
        <Route path="/login" element={<Login/>} />
    </Routes>
    </BrowserRouter>
  );
}

export default App;

让我们看一下我们刚刚编写的一些有趣的代码。

首先我们导入react-router-dom包

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

我们为组件创建了路由，以便我们可以在页面中浏览它们，特别是主页和登录组件。

在下一节中，我们将设置我们的 redux。

创建我们的 Redux

为 redux 创建一个新的文件夹，并将其命名为 Redux。在 Redux 文件夹中，创建一个新的文件夹，并将其命名为 Slice。在 slice 文件夹中创建一个名为 userSlice.js 的文件。
在 slice.js 文件中，写入以下代码：

import  {createSlice} from '@reduxjs/toolkit';

const initialState = {

    state: {
        isFetching: false,
    },
    user:{
  name:"collins",
  isAuthenticated:true
},
}


const userSlice = createSlice({
  name: "user",
  initialState,
  reducers: {
    setIsFetching : (state) => {
        state.state.isFetching = true;
  }, 
  }  
});

export const {
      setIsFetching,
    } = userSlice.actions;


export default userSlice.reducer;

在我们的代码中，我们创建了一个 redux 切片，它只存储用户对象中的两个属性。

这些是我们设计安全路线时要用到的细节，也是资格要求。

创建 redux 存储

在Redux文件夹中创建一个store.js文件并输入以下代码。

import {configureStore} from '@reduxjs/toolkit';
import {
    persistStore,
    persistReducer,
    FLUSH,
    REHYDRATE,
    PAUSE,
    PERSIST,
    PURGE,
    REGISTER,
  } from "redux-persist";
  import storage from "redux-persist/lib/storage";

 import userReducer from "./Slice/Slice";

  const persistConfig = {
    key: "root",
    version: 1,
    storage,
  };

  const rootReducer = persistReducer(persistConfig, userReducer);

const store = configureStore({
  reducer: { user: rootReducer},
  middleware: (getDefaultMiddleware) =>
    getDefaultMiddleware({
      serializableCheck: {
        ignoredActions: [FLUSH, REHYDRATE, PAUSE, PERSIST, PURGE, REGISTER],
      },
    }),
});
export let persistor = persistStore(store);
export default store;

从上面的代码可以看出，这个 store.js 文件是我们传递 reducer 的地方，并添加了关于我们是否希望我们管理的数据持久化的逻辑。

传递 Store Prop

导航到 src 文件夹的 index.js 文件，并将其中的内容与 store 模块包装在一起，以便它在我们所有的组件中都有效。我们将借助从react-redux包中导入的 Provider 组件来实现这一点。
按照下面的代码所示插入它。

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import { Provider } from 'react-redux';
import store from './Redux/store';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <Provider store={store}>
  <App />
</Provider>
);

创建受保护的路由文件

导航到 src 文件夹，并创建一个名为 utils 的文件夹。在 utils 文件夹中，创建一个名为 ProtectedRoute.js 的文件。

在 ProtectedRoute.js 文件中写入以下代码。

import React from 'react'
import {useSelector} from "react-redux"
import {Navigate, useLocation} from "react-router-dom"

const ProtectedRoute = ({children}) => {
    const user = useSelector((state) => state.user);
    let location = useLocation();

    if(!user.state.isAuthenticated) {
        return <Navigate to="/login" state={{ from: location}} replace />
    }
 return children

};

export default ProtectedRoute;

如上面的代码所示，我们首先useSelector从我们的react-redux包中导入我们的，这将允许我们访问存储在我们的 redux 上的用户对象。

之后，如您所见，我们编写了一些逻辑来检查 isAuthenticated 是否为 true。如果是，则应将用户返回到主屏幕；如果不是，则应导航到登录页面。
在下一节中，我们将包装受保护的 Route 模块。

包装受保护的路由模块

返回到您的 app.js 文件夹并将您的代码更新为以下内容。

import Home from "./Home/Home";
import Login from "./Login/Login";
import {BrowserRouter,Route,Routes} from "react-router-dom";
import ProtectedRoute from "./utils/ProtectedRoute";

function App() {
  return (
    <BrowserRouter>
    <Routes>
        <Route path="/" element={
        <ProtectedRoute>
        <Home/>
        </ProtectedRoute>
     }/>
        <Route path="/login" element={<Login/>} />
    </Routes>
    </BrowserRouter>
  );
}

export default App;

如下代码所示，我们将模块封装在需要保护的路由中。在本例中，主页必须经过身份验证才能访问；否则，用户将被定向到登录页面进行身份验证，然后才能访问主页。

恭喜，您现在拥有一个带有受保护路线的网页。

完整的源代码可在此处供您参考。

恭喜，您已完成本教程。您觉得它怎么样？我相信它一定很棒。

结论

总而言之，Reactjs 的 Protected Route 是保障用户数据安全的绝佳方式。使用这种路由，您可以确保只有授权用户才能访问您网站的特定区域。这不仅能保障网站数据安全，还能确保用户信息的机密性。
感谢您抽出时间阅读本文，希望下次再见。祝您探索愉快！

文章来源：https://dev.to/collins87mbathi/reactjs-protected-route-m3j