Как показать страницу сброса пароля в React с помощью Django Rest Framework и Dj-rest-auth

У меня есть приложение, которое имеет React front end и Django api backend. Я пытаюсь заставить работать страницу сброса пароля, но не могу понять, как настроить урлы/маршрутизацию. У меня все работало локально, но я думаю, что это было потому, что порты для frontend и backend локально разные, так что они были по сути разными доменами.

Мои шаблоны url в Django включают:

path('api/v1/dj-rest-auth/password/reset/confirm/<uidb64>/<token>/', PasswordResetConfirmView.as_view(), name='password_reset_confirm')

У меня в Django urls есть catchall url, чтобы остальные части фронтенда работали.

Мой React Router включает:

<Route path="/api/v1/dj-rest-auth/password/reset/confirm/:uid/:token/" component={ResetPassword} />

Моя страница сброса пароля в React содержит:

    let url = process.env.REACT_APP_API_PATH + '/api/v1/dj-rest-auth/password/reset/confirm/' + this.props.match.params.uid + '/' +  this.props.match.params.token + '/';
    let headers = {token: this.props.match.params.token, 
                    uid: this.props.match.params.uid, 
                    new_password1: this.state.newPassword, 
                    new_password2: this.state.newPasswordConf
                  }
    axios
      .post(url, headers)

Это принимает токен и uid из ссылки сброса пароля и отправляет их вместе с новым паролем пользователя на конечную точку сброса пароля.

Дилемма заключается в том, что мне нужно получить доступ к ссылке сброса через React, чтобы получить токен и uid, но затем мне нужно получить доступ к той же ссылке как вызов API, чтобы сбросить пароль.

OK, мне удалось решить ее немного нахальным способом.

Я просто изменил шаблон для письма сброса пароля, используя шаблон по умолчанию, но просто добавив кое-что в url. Просто чтобы url отличался каким-то образом.

Я скопировал этот шаблон в templates/registration

Затем просто добавьте дополнительное слово (email - но это может быть любое слово) к пути, который будет создан в письме:

{{ protocol }}://{{ domain }}/email{% url 'password_reset_confirm' uidb64=uid token=token %}

Теперь я могу использовать этот новый путь в моем React Router для получения uid и token, но когда я отправляю данные в api, я использую "правильный" url (тот, что в моих Django urlpatterns)

Вернуться на верх