如何在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組件用于登錄并更新用戶的登錄狀態。

您可以根據自己的需求修改這個示例代碼來實現您的權限路由和私有路由。希望這可以幫助到您。