如何在React中使用JWT Token实现私有路由

npx create-react-app my-app
cd my-app

npm install jsonwebtoken

import jwt from 'jsonwebtoken';

const secretKey = 'your-secret-key';

class AuthService {
  static generateToken(payload) {
    return jwt.sign(payload, secretKey, { expiresIn: '1h' });
  }

  static verifyToken(token) {
    try {
      return jwt.verify(token, secretKey);
    } catch (error) {
      return null;
    }
  }
}

export default AuthService;

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

const PrivateRoute = ({ component: Component, ...rest }) => (
  <Route
    {...rest}
    render={(props) =>
      AuthService.verifyToken(localStorage.getItem('token')) ? (
        <Component {...props} />
      ) : (
        <Redirect to="/login" />
      )
    }
  />
);

class App extends Component {
  render() {
    return (
      <Router>
        <div>
          <Route exact path="/login" component={Login} />
          <PrivateRoute exact path="/private" component={PrivateComponent} />
        </div>
      </Router>
    );
  }
}

export default App;