Django REST SimpleJWT结合React获取登录用户详情的方法

你现有JWT认证流程已经跑通，获取当前登录用户信息分后端接口开发、前端调用两个环节实现即可：

第一步：后端新增当前用户信息接口 #

基于你用的Django REST Framework + SimpleJWT技术栈，直接开发一个登录态可访问的用户详情接口：

1. 新增用户信息序列化器，在accounts/serializers.py中添加如下代码，注意不要返回密码等敏感字段：

from rest_framework import serializers
from .models import UserAccount

class UserDetailSerializer(serializers.ModelSerializer):
    class Meta:
        model = UserAccount
        fields = ('id', 'email', 'name')
        read_only_fields = fields

2. 编写对应视图，在accounts/views.py中添加：

from rest_framework.generics import RetrieveAPIView
from rest_framework.permissions import IsAuthenticated
from .models import UserAccount
from .serializers import UserDetailSerializer

class CurrentUserView(RetrieveAPIView):
    serializer_class = UserDetailSerializer
    permission_classes = [IsAuthenticated]

    def get_object(self):
        # 直接返回当前发起请求的已认证用户对象
        return self.request.user

3. 配置路由，在accounts/urls.py中新增路由规则：

from django.urls import path
from .views import CurrentUserView

urlpatterns = [
    # 保留原有注册等路由
    path('me/', CurrentUserView.as_view(), name='current-user'),
]

配置完成后，请求头携带有效JWT访问http://127.0.0.1:8000/api/user/me/，即可拿到当前登录用户的id、邮箱、用户名信息，你现有的axios拦截器会自动处理token续期、无效跳转逻辑，不需要额外修改。

第二步：前端调用接口获取并渲染用户信息 #

直接用你已经封装好的axios实例调用接口即可，以导航栏组件为例：

import { useState, useEffect } from 'react'
import axiosInstance from './axios' // 替换为你项目中axios实例的实际路径
import { Link, useNavigate } from 'react-router-dom'

export default function Navbar() {
  const [user, setUser] = useState(null)
  const navigate = useNavigate()

  useEffect(() => {
    // 本地存在access_token时才请求用户信息
    if (localStorage.getItem('access_token')) {
      axiosInstance.get('user/me/')
        .then(res => {
          setUser(res.data)
        })
        .catch(err => {
          // token失效场景拦截器会自动跳转登录页，此处无需额外处理
          console.log(err)
        })
    }
  }, [])

  const handleLogout = () => {
    localStorage.removeItem('access_token')
    localStorage.removeItem('refresh_token')
    axiosInstance.defaults.headers['Authorization'] = null
    setUser(null)
    navigate('/login')
  }

  return (
    <nav>
      {/* 其他导航链接 */}
      <div className="user-area">
        {user ? (
          <>
            <span>你好，{user.name}</span>
            <button onClick={handleLogout}>退出登录</button>
          </>
        ) : (
          <>
            <Link to="/login">登录</Link>
            <Link to="/register">注册</Link>
          </>
        )}
      </div>
    </nav>
  )
}

如果多个页面都需要用到用户信息，可以在应用初始化时请求一次用户数据，存入Context/Redux/Zustand等全局状态，所有组件直接从全局状态读取即可，不需要重复发请求。

注意：不要直接解析JWT的payload获取用户信息作为可信数据源，payload仅做Base64编码没有加密，用户可以手动篡改内容。涉及权限判断、用户信息展示的场景，一定要通过后端接口返回数据，前端解析JWT仅适合做token过期时间判断这类非敏感操作。

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