如何在React应用中实现权限路由和私有路由

在React应用中实现权限路由和私有路由的一种常见方法是使用React Router库。首先，您可以使用React Router中的Route组件来定义需要权限的路由和私有路由。然后，您可以在渲染组件之前检查用户的权限或登录状态，并根据需要重定向到登录页面或其他页面。

以下是一个示例代码，演示如何在React应用中实现权限路由和私有路由：

import React from 'react';
import { BrowserRouter as Router, Route, Redirect } from 'react-router-dom';

const fakeAuth = {
  isAuthenticated: false,
  login(cb) {
    this.isAuthenticated = true;
    setTimeout(cb, 100); // fake async
  },
  logout(cb) {
    this.isAuthenticated = false;
    setTimeout(cb, 100);
  }
};

const PrivateRoute = ({ component: Component, ...rest }) => (
  <Route {...rest} render={(props) => (
    fakeAuth.isAuthenticated === true
      ? <Component {...props} />
      : <Redirect to='/login' />
  )} />
);

const AdminRoute = ({ component: Component, ...rest }) => (
  <Route {...rest} render={(props) => (
    fakeAuth.isAuthenticated === true && fakeAuth.isAdmin === true
      ? <Component {...props} />
      : <Redirect to='/login' />
  )} />
);

const LoginPage = (props) => {
  return (
    <div>
      <h2>Login</h2>
      <button onClick={() => {
        fakeAuth.login(() => {
          props.history.push('/');
        });
      }}>Login</button>
    </div>
  );
};

const AdminPage = () => {
  return (
    <div>
      <h2>Admin Page</h2>
    </div>
  );
};

const HomePage = () => {
  return (
    <div>
      <h2>Home Page</h2>
    </div>
  );
};

const App = () => {
  return (
    <Router>
      <div>
        <Route path='/login' component={LoginPage} />
        <PrivateRoute exact path='/' component={HomePage} />
        <AdminRoute path='/admin' component={AdminPage} />
      </div>
    </Router>
  );
};

export default App;

在上面的示例中，我们定义了一个fakeAuth对象来模拟用户的登录状态和权限。我们创建了PrivateRoute和AdminRoute组件来检查用户的登录状态和权限，并根据需要重定向到登录页面或其他页面。LoginPage组件用于登录并更新用户的登录状态。

您可以根据自己的需求修改这个示例代码来实现您的权限路由和私有路由。希望这可以帮助到您。