1. 前言
- react 中路由守卫 提的比较少
- 这个是写的 react-router-dom 5x的路由守卫一种写法
- 写法有很多种 .都是条件渲染,仅供参考
2. 逻辑
- 在React中，路由守卫可以通过使用React Router实现。React Router提供了一个名为
<Route>的组件，可以用来定义路由和其对应的组件。你可以通过在<Route>组件上添加一个render属性，来自定义路由守卫逻辑。
3. 简单的React路由守卫的示例代码
import React from "react";
import { BrowserRouter as Router, Route, Redirect } from "react-router-dom";
// 需要进行路由守卫的组件
const PrivateComponent = () => <h1>Private Component</h1>;
// 路由守卫
const AuthGuard = ({ component: Component, ...rest }) => (
<Route {...rest} render={(props) =>
isLoggedIn() // 自定义判断登录状态的函数
<Component {...props} />
: <Redirect to={{ pathname: '/login' }} />
}
/>
);
// App组件
const App = () => (
<Router>
<div>
<h1>React Router Demo</h1>
<AuthGuard path="/private" component={PrivateComponent} />
</div>
</Router>
);
// 自定义函数：判断用户是否已登录
const isLoggedIn = () => {
// 判断用户是否已经登录，返回 true 或 false
return true;
}
export default App;
4. 分析
- AuthGuard是我们自己定义的一个组件，它接收一个component属性和其他路由属性（例如path）
- 并在render函数中进行路由守卫逻辑。
- 如果用户已登录，AuthGuard会渲染传入的组件，
- 否则它会重定向到登录页面。
- 在App组件中，我们将AuthGuard用于需要进行路由守卫的组件。
- 当用户访问私有页面（例如“/private”）时，React Router会自动调用AuthGuard组件，并根据登录状态判断是否展示PrivateComponent组件。如果用户未登录，AuthGuard会将页面重定向到登录页面。
当然，上面的代码只是一个简单的示例。在实际开发中，你可能需要根据自己的需求来定制路由守卫逻辑，例如添加登录逻辑、验证用户权限等。