基于JWT认证的Django Rest Framework获取用户信息技术问询

嘿，这事儿不难，咱们分Django后端和React前端两步来实现，保证你能顺利拿到用户信息：

既然你已经用了JWT认证，那咱们直接基于rest_framework_simplejwt来做就行：

1. 先写一个视图类，专门返回当前登录用户的信息，这个视图必须要求用户携带有效的JWT令牌才能访问：

from rest_framework.views import APIView
from rest_framework.response import Response
from rest_framework.permissions import IsAuthenticated
from rest_framework_simplejwt.authentication import JWTAuthentication
from django.contrib.auth.models import User

class UserInfoView(APIView):
    # 指定用JWT做身份验证
    authentication_classes = [JWTAuthentication]
    # 只有已认证的用户才能访问这个接口
    permission_classes = [IsAuthenticated]

    def get(self, request):
        # request.user就是当前通过JWT验证的用户对象
        user = request.user
        # 返回你需要的用户字段，按需添加就行
        return Response({
            'id': user.id,
            'username': user.username,
            'email': user.email,
            # 比如还可以加first_name、last_name之类的
        })

2. 把这个视图加到你的urls.py里，配置一个接口路径：

from django.urls import path
from .views import UserInfoView  # 记得替换成你实际的视图路径

urlpatterns = [
    # 你已有的获取令牌接口：/api/auth/token/obtain
    path('api/auth/user-info/', UserInfoView.as_view(), name='user-info'),
]

3. 测试一下：用Postman或者curl，在请求头里带上Authorization: Bearer <你的access令牌>，发一个GET请求到/api/auth/user-info/，正常的话就能拿到用户信息啦。

前端这边主要是把拿到的access令牌带上，去请求刚才的后端接口：

1. 先确保你已经把获取到的access令牌存在了合适的地方，比如localStorage或者状态管理工具（比如Redux、React Context）里。

2. 写一个请求用户信息的函数：

async function fetchUserInfo() {
    const accessToken = localStorage.getItem('access_token');
    if (!accessToken) {
        // 没有令牌的话，直接跳登录页或者提示用户登录
        window.location.href = '/login';
        return;
    }

    try {
        const response = await fetch('/api/auth/user-info/', {
            method: 'GET',
            headers: {
                // 关键：把JWT令牌放到Authorization头里
                'Authorization': `Bearer ${accessToken}`,
                'Content-Type': 'application/json'
            }
        });

        if (!response.ok) {
            // 如果返回401，说明令牌过期或者无效，这里可以处理刷新令牌的逻辑
            if (response.status === 401) {
                // 调用刷新令牌的接口，拿到新的access令牌后再重新请求用户信息
                // 这里可以加你之前写的刷新令牌逻辑
            }
            throw new Error('获取用户信息失败');
        }

        const userData = await response.json();
        return userData;
    } catch (err) {
        console.error('请求出错：', err);
    }
}

3. 在组件里调用这个函数，展示用户信息：

import { useEffect, useState } from 'react';

function UserProfile() {
    const [user, setUser] = useState(null);
    const [loading, setLoading] = useState(true);

    useEffect(() => {
        const getUser = async () => {
            const data = await fetchUserInfo();
            setUser(data);
            setLoading(false);
        };
        getUser();
    }, []);

    if (loading) {
        return <div>加载用户信息中...</div>;
    }

    if (!user) {
        return <div>无法获取用户信息，请重新登录</div>;
    }

    return (
        <div className="user-profile">
            <h2>我的信息</h2>
            <p>用户名：{user.username}</p>
            <p>邮箱：{user.email}</p>
            <p>用户ID：{user.id}</p>
        </div>
    );
}

export default UserProfile;

虽然你的JWT令牌里已经带有user_id，但不建议直接在前端解码令牌获取用户信息——一来令牌里的信息可能被篡改（虽然JWT签名能验证，但前端解码还是有风险），二来后端能返回更完整、更准确的用户数据，安全性更高。

另外，记得处理令牌过期的情况：如果调用用户信息接口返回401，就用你手里的refresh令牌去/api/auth/token/refresh/接口刷新新的access令牌，然后再重新请求用户信息。

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