如何从ASP.NET Web API向React JS传递并获取JWT Token？

嘿，我来帮你搞定这个JWT集成的问题！既然你的Web API已经在Postman里跑通了，那咱们重点解决Token从API到React的传递和React侧的Token获取/存储这两个核心点。

一、Web API端：确保Token正确返回给React #

首先你得保证登录接口在验证用户身份成功后，把生成的JWT Token以JSON响应体的形式返回（这是最直观也最易被React接收的方式）。我补全你没写完的控制器代码，给你一个标准示例：

using System;
using System.Collections.Generic;
using System.IdentityModel.Tokens.Jwt;
using System.Security.Claims;
using System.Text;
using Microsoft.AspNetCore.Mvc;
using Microsoft.IdentityModel.Tokens;

[Route("api/[controller]")]
[ApiController]
public class AuthController : ControllerBase
{
    private readonly IConfiguration _configuration;

    public AuthController(IConfiguration configuration)
    {
        _configuration = configuration;
    }

    [HttpPost("login")]
    public IActionResult Login([FromBody] LoginModel loginModel)
    {
        // 这里是你的用户验证逻辑（比如查数据库匹配账号密码）
        bool isUserValid = ValidateUser(loginModel.Username, loginModel.Password);

        if (!isUserValid)
        {
            return Unauthorized("账号或密码错误");
        }

        // 生成JWT Token
        var tokenHandler = new JwtSecurityTokenHandler();
        var key = Encoding.ASCII.GetBytes(_configuration["Jwt:Secret"]);
        var tokenDescriptor = new SecurityTokenDescriptor
        {
            Subject = new ClaimsIdentity(new[] 
            {
                new Claim(ClaimTypes.Name, loginModel.Username),
                new Claim(ClaimTypes.Role, "User") // 按需添加角色等声明
            }),
            Expires = DateTime.UtcNow.AddHours(1), // Token有效期
            SigningCredentials = new SigningCredentials(new SymmetricSecurityKey(key), SecurityAlgorithms.HmacSha256Signature)
        };
        var token = tokenHandler.CreateToken(tokenDescriptor);
        var tokenString = tokenHandler.WriteToken(token);

        // 关键：把Token放在响应体里返回
        return Ok(new { Token = tokenString, Username = loginModel.Username });
    }

    // 模拟用户验证方法，替换成你的实际逻辑
    private bool ValidateUser(string username, string password)
    {
        return username == "test" && password == "123456"; // 示例逻辑
    }
}

// 登录请求模型
public class LoginModel
{
    public string Username { get; set; }
    public string Password { get; set; }
}

重点注意：一定要把Token包装在JSON对象里返回，而不是放在响应Header里（除非你有特殊需求），这样React可以直接从响应数据里提取。

二、React端：获取、存储Token并在请求中使用 #

接下来看React这边怎么操作，我用最常用的axios库来演示（用fetch的逻辑类似）：

1. 登录时获取Token #

创建一个登录组件，调用API并提取Token：

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

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

    const handleLogin = async (e) => {
        e.preventDefault();
        try {
            // 调用Web API的登录接口
            const response = await axios.post('http://your-api-url/api/auth/login', {
                username: username,
                password: password
            });

            // 从响应中提取Token
            const { token, username } = response.data;

            // 存储Token：推荐用localStorage（持久化）或sessionStorage（会话级）
            localStorage.setItem('jwtToken', token);
            localStorage.setItem('currentUser', username);

            // 登录成功后跳转到主页等
            window.location.href = '/dashboard';
        } catch (error) {
            console.error('登录失败:', error.response.data);
            alert('账号或密码错误');
        }
    };

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

export default Login;

2. 后续请求自动携带Token #

为了避免每次请求都手动加Token，你可以给axios设置全局请求拦截器，自动在请求Header里带上Token：

// 在项目的入口文件（比如App.js或者单独的api.js）中配置
import axios from 'axios';

// 创建axios实例
const api = axios.create({
    baseURL: 'http://your-api-url/api'
});

// 请求拦截器：自动添加Authorization Header
api.interceptors.request.use(
    (config) => {
        const token = localStorage.getItem('jwtToken');
        if (token) {
            config.headers.Authorization = `Bearer ${token}`;
        }
        return config;
    },
    (error) => {
        return Promise.reject(error);
    }
);

export default api;

之后所有用这个api实例发起的请求，都会自动带上Token，比如：

import api from './api';

async function fetchUserData() {
    try {
        const response = await api.get('/user/profile');
        console.log('用户数据:', response.data);
    } catch (error) {
        // 如果Token过期或无效，这里可以处理跳转登录页逻辑
        if (error.response.status === 401) {
            localStorage.removeItem('jwtToken');
            window.location.href = '/login';
        }
    }
}

三、额外的最佳实践 #

• Token安全：localStorage存在XSS攻击风险，如果你的项目对安全性要求极高，可以考虑用HttpOnly Cookie存Token，但这种方式需要API和React同域（或配置CORS允许携带Cookie），且React无法直接读取Cookie，适合后端渲染场景。
• Token过期处理：在React的响应拦截器里统一处理401状态码，自动清除Token并跳转到登录页。
• 状态管理：如果是大型项目，建议把Token和用户信息存在Redux或React Context中，方便跨组件使用。

内容的提问来源于stack exchange，提问作者Karan Patokar