或者

React JWT 教程

React JWT 是一个用于 React 应用的简单 JWT（JSON Web Tokens）身份验证解决方案。它可以帮助你轻松地在你的 React 应用中实现用户认证。

安装

首先，你需要安装 react-jwt 包。你可以使用 npm 或 yarn 来安装它：

npm install react-jwt

yarn add react-jwt

使用

下面是一个简单的例子，展示如何在 React 组件中使用 react-jwt：

import React from 'react';
import jwtDecode from 'jwt-decode';

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      token: localStorage.getItem('token'),
      user: null
    };
  }

  componentDidMount() {
    if (this.state.token) {
      this.setState({ user: jwtDecode(this.state.token) });
    }
  }

  render() {
    const { user } = this.state;

    return (
      <div>
        {user && <h1>欢迎，{user.username}！</h1>}
        {!user && <h1>请登录</h1>}
      </div>
    );
  }
}

export default App;

登录

为了使用 JWT，你需要一个后端服务来生成和验证 JWT。这里有一个简单的登录示例：

import React, { useState } from 'react';
import axios from 'axios';

const Login = () => {
  const [username, setUsername] = useState('');
  const [password, setPassword] = useState('');

  const handleLogin = async (e) => {
    e.preventDefault();
    try {
      const response = await axios.post('/api/login', {
        username,
        password
      });
      localStorage.setItem('token', response.data.token);
      window.location.href = '/'; // 重定向到主页
    } catch (error) {
      console.error('登录失败:', error);
    }
  };

  return (
    <form onSubmit={handleLogin}>
      <div>
        <label>用户名:</label>
        <input
          type="text"
          value={username}
          onChange={(e) => setUsername(e.target.value)}
        />
      </div>
      <div>
        <label>密码:</label>
        <input
          type="password"
          value={password}
          onChange={(e) => setPassword(e.target.value)}
        />
      </div>
      <button type="submit">登录</button>
    </form>
  );
};

export default Login;

更多关于 JWT 和 React 的教程，请访问我们的 React JWT 教程。

Golden Retriever