如何配置Djoser使密码重置链接跳转至Vue前端？

问题背景 #

已通过Django+Djoser实现密码重置邮件发送功能，但邮件内的重置链接默认指向后端服务地址http://127.0.0.1:8000，需要修改配置让链接跳转至Vue前端地址http://127.0.0.1:8080，并携带uid和token参数用于后续重置操作。

修改步骤 #

1. 调整后端Djoser配置（backend/settings.py） #

修改DJOSER配置中的PASSWORD_RESET_CONFIRM_URL，直接拼接前端地址和参数占位符：

# ...（其他配置）
BASE_URL = 'http://127.0.0.1:8080'

DJOSER = {
    # 直接指定前端的密码重置确认页面地址，携带uid和token参数
    'PASSWORD_RESET_CONFIRM_URL': f"{BASE_URL}/password-reset-confirm/{uid}/{token}",
    'SEND_ACTIVATION_EMAIL': True,
    'SERIALIZERS': {},
}
# ...（其他配置）

注意：使用Python的f-string拼接BASE_URL和路径，确保生成的链接是完整的前端地址。

2. 修正前端Vue路由配置（frontend/router/index.js） #

调整ResetPasswordConfirm的路由路径，移除参数名的大括号，保证和后端生成的路径匹配：

const routes = [
  {
    path: '/reset-password',
    name: 'ResetPassword',
    component: ResetPassword
  },
  {
    path: '/reset-password-done',
    name: 'ResetPasswordDone',
    component: ResetPasswordDone
  },
  // 修改路径格式，参数名直接用:uid和:token
  {
    path: '/password-reset-confirm/:uid/:token',
    name: 'ResetPasswordConfirm',
    component: ResetPasswordConfirm
  },
]

前端路由路径要和后端PASSWORD_RESET_CONFIRM_URL中指定的路径完全一致，这样点击邮件链接时才能正确匹配到对应的页面。

3. 验证效果 #

重启Django后端服务后，触发密码重置流程，邮件内的链接将变为http://127.0.0.1:8080/password-reset-confirm/[实际uid]/[实际token]，点击后会跳转到Vue前端的密码重置确认页面，此时可以在页面中通过$route.params.uid和$route.params.token获取参数，完成后续的密码重置请求。

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