react privateroute 用法
React PrivateRoute 是一个在 React Router 中用于实现代理认证逻辑的功能组件，用于控制只有经过身份验证的用户才能访问特定路由。其基本用法如下：
1. 首先引入必要的库，如`react-router-dom`，并创建一个名为`PrivateRoute`的组件。
```jsx
import React from 'react';
import { Route, Redirect, useLocation } from 'react-router-dom';
import AuthService from './AuthService'; // 假设这是你的认证服务模块
function PrivateRoute({ component: Component, ...rest }) {
  const location = useLocation();
  const auth = new AuthService(); // 初始化认证服务
  return (
    <Route {...rest} render={(props) => (
      auth.isAuthenticated() ?
        <Component {...props} /> :
        <Redirect to={{ pathname: '/login', state: { from: location } }} />
    )} />
  );
}
export default PrivateRoute;
```
2. 在上述代码中，`PrivateRoute`接收一个名为`component`的prop，表示需要保护的组件。当用户已通过`AuthService`认证（这里假设`isAuthenticated()`方法检查用户是否登录），则渲染传入的组件；否则，重定向至登录页面（这里是'/login'），同时保存来源地址以便登录成功后跳转回原页面。
3. 在实际应用中，你只需像使用常规`Route`一样配置`PrivateRoute`即可：
```jsx
import PrivateRoute from './PrivateRoute';
// ...
react router 6
<Route path="/protected" component={ProtectedComponent} exact={true} />
// 改写为
<PrivateRoute path="/protected" component={ProtectedComponent} exact={true} />
```
这样，未经认证的用户试图访问"/protected"路径时，会被自动重定向至登录页。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。