如何使用 JWT（JSON Web 令牌）在 React 中实现身份验证

身份验证是许多 Web 应用程序的关键部分，保护 React 中的路由需要了解令牌（例如 JSON Web 令牌 (JWT)）的工作原理。 JWT 允许您在客户端和服务器之间安全地传输信息，这对于在现代 Web 应用程序中实现用户身份验证特别有用。在本文中，我们将学习如何使用 JWT 在 React 中实现身份验证。

什么是智威汤逊？

JSON Web 令牌 (JWT) 是紧凑的 URL 安全令牌，用于表示两方之间的声明。 JWT 是单页应用程序 (SPA) 中身份验证的热门选择，因为它轻量级、无状态且易于实现。

典型的 JWT 由三部分组成：
1.标头： 包含有关令牌的元数据，包括签名算法。
2. Payload： 包含您想要传输的声明（数据），例如用户信息。
3.签名： 用于验证发件人确实是其所说的人，并确保消息在此过程中没有被更改。

在 React 中实现 JWT 身份验证的步骤

1。后端设置 (Node.js Express JWT)

• 安装所需的依赖项：express、jsonwebtoken、bcryptjs。
• 设置一个简单的 Express 服务器并创建用于登录和受保护数据访问的路由。
• 成功登录后生成 JWT 令牌。 后端代码示例（Node.js Express JWT）：

const express = require('express');
const jwt = require('jsonwebtoken');
const bcrypt = require('bcryptjs');
const app = express();
const users = [{ username: 'test', password: 'a$...' }]; // Example user data

app.use(express.json());

app.post('/login', (req, res) => {
  const { username, password } = req.body;

  // Verify user credentials
  const user = users.find(u => u.username === username);
  if (user && bcrypt.compareSync(password, user.password)) {
    const token = jwt.sign({ username: user.username }, 'secretKey', { expiresIn: '1h' });
    return res.json({ token });
  } else {
    return res.status(401).send('Invalid credentials');
  }
});

app.listen(5000, () => console.log('Server running on port 5000'));

2。前端设置（React JWT）：

• 使用 React 的 useState 和 useEffect 钩子来管理身份验证状态。
• 成功登录后将 JWT 令牌存储在本地存储或 cookie 中。
• 使用 JWT 令牌向后端 API 发出经过身份验证的请求。 前端代码示例（React JWT）：

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

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

  const handleLogin = async (e) => {
    e.preventDefault();
    try {
      const response = await axios.post('http://localhost:5000/login', { username, password });
      localStorage.setItem('token', response.data.token); // Store the JWT
      alert('Login successful');
    } catch (error) {
      alert('Login failed');
    }
  };

  return (
    <form onSubmit={handleLogin}>
      <input type="text" value={username} onChange={(e) => setUsername(e.target.value)} />
      <input type="password" value={password} onChange={(e) => setPassword(e.target.value)} />
      <button type="submit">Login</button>
    </form>
  );
}

function Dashboard() {
  const [data, setData] = useState([]);

  useEffect(() => {
    const token = localStorage.getItem('token');
    if (token) {
      axios.get('http://localhost:5000/protected', {
        headers: { Authorization: `Bearer ${token}` }
      })
      .then(response => setData(response.data))
      .catch(error => console.error(error));
    }
  }, []);

  return (
    <div>
      <h1>Protected Dashboard</h1>
      <pre class="brush:php;toolbar:false">{JSON.stringify(data, null, 2)}

); }

登录后复制

3。保护路线：

• 使用 React Router 创建需要身份验证的私有路由。
• 在允许访问受保护的路由之前检查 JWT 令牌是否存在。 例子：

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

结论
在 React 中实现 JWT 身份验证是一个简单的过程，涉及创建安全后端、在成功登录时生成令牌以及管理 React 中的身份验证状态。 JWT 提供了一种可扩展且无状态的方式来管理现代 Web 应用程序中的身份验证。

以上是如何使用 JWT（JSON Web 令牌）在 React 中实现身份验证的详细内容。更多信息请关注PHP中文网其他相关文章！