如何使用Django Rest Framework与Dj-rest-auth在React中实现密码重置页面

方法1：后端路由区分请求方法（最推荐，无需修改前端现有逻辑） #

你的核心矛盾是同一路径下，GET请求需要返回前端页面、POST请求需要交给后端接口处理，只需要调整Django路由的匹配规则即可：

1. 给Django的密码重置确认接口添加请求方法限制，只响应POST请求
2. 确保所有API路由的优先级高于catchall路由

修改后的Django路由示例：

from django.urls import path, re_path
from django.views.generic import TemplateView
from django.views.decorators.http import require_http_methods
# 引入你的PasswordResetConfirmView

urlpatterns = [
    # 仅处理POST请求的密码重置接口
    path(
        'api/v1/dj-rest-auth/password/reset/confirm/<uidb64>/<token>/',
        require_http_methods(["POST"])(PasswordResetConfirmView.as_view()),
        name='password_reset_confirm'
    ),
    # 其余所有API路由统一放在此处，优先级高于catchall
    # ...
    # 最后配置catchall路由，处理所有未匹配的GET请求，返回前端页面
    re_path(r'^.*$', TemplateView.as_view(template_name="index.html")),
]

逻辑说明：

• 用户点击密码重置链接发送GET请求到该路径时，Django不会匹配到仅响应POST的API路由，会走最后的catchall规则返回React的index.html
• React加载完成后，React Router会匹配路径参数，渲染密码重置页面
• 用户提交新密码时前端发送POST请求到同路径，Django匹配到API路由完成密码重置逻辑

方法2：拆分前后端路径 #

如果不想修改后端路由规则，可以直接拆分前后端的访问路径：

1. 修改React Router的路由规则为独立的前端路径，比如：

<Route path="/password-reset/confirm/:uid/:token/" component={ResetPassword} />

2. 修改Django密码重置邮件的链接生成逻辑，生成前端路径的重置链接，而不是API路径
3. 前端提交请求时依然发送到原来的API路径即可，无需修改axios逻辑

额外注意事项 #

你当前代码中axios请求的第二个参数是请求体，你命名为headers容易造成误解，建议修改为payload或data，避免后续维护出错。

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