如何使用 Django Rest Framework 和 Dj-rest-auth 在 React 中显示我的重置密码页面
How to show my reset password page in React using Django Rest Framework and Dj-rest-auth
我有一个应用程序有一个 React 前端和一个 Django api 后端。我正在尝试让密码重置页面正常工作,但我不知道如何设置 urls/routing。我让它在本地工作,但我认为那是因为前端和后端的端口在本地不同,所以它们本质上是不同的域。
我的 Django url 模式包括:
path('api/v1/dj-rest-auth/password/reset/confirm/<uidb64>/<token>/', PasswordResetConfirmView.as_view(), name='password_reset_confirm')
我的 Django url 中有一个包罗万象的 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 link,然后将它们与用户的新密码一起发送到密码重置端点。
问题似乎是,我需要通过 React 访问重置 link 才能获取令牌和 uid,但随后我需要访问与调用相同的 link至 API 以便能够重设密码。
好吧,我用稍微厚脸皮的方式解决了。
我只是覆盖了密码重置电子邮件的模板,使用默认模板,但只是向 url 添加了一些额外的东西。只是 url 在某些方面有所不同。
我将 this 模板复制到 templates/registration
然后在电子邮件中创建的路径中添加一个额外的单词(email
- 但可以是任何单词):
{{ protocol }}://{{ domain }}/email{% url 'password_reset_confirm' uidb64=uid token=token %}
现在我可以在我的 React Router 中使用这个新路径来获取 uid 和令牌,但是当我将数据提交到 api 时,我使用 'proper' url (我的 Django url 模式中的那个)
我有一个应用程序有一个 React 前端和一个 Django api 后端。我正在尝试让密码重置页面正常工作,但我不知道如何设置 urls/routing。我让它在本地工作,但我认为那是因为前端和后端的端口在本地不同,所以它们本质上是不同的域。
我的 Django url 模式包括:
path('api/v1/dj-rest-auth/password/reset/confirm/<uidb64>/<token>/', PasswordResetConfirmView.as_view(), name='password_reset_confirm')
我的 Django url 中有一个包罗万象的 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 link,然后将它们与用户的新密码一起发送到密码重置端点。
问题似乎是,我需要通过 React 访问重置 link 才能获取令牌和 uid,但随后我需要访问与调用相同的 link至 API 以便能够重设密码。
好吧,我用稍微厚脸皮的方式解决了。
我只是覆盖了密码重置电子邮件的模板,使用默认模板,但只是向 url 添加了一些额外的东西。只是 url 在某些方面有所不同。
我将 this 模板复制到 templates/registration
然后在电子邮件中创建的路径中添加一个额外的单词(email
- 但可以是任何单词):
{{ protocol }}://{{ domain }}/email{% url 'password_reset_confirm' uidb64=uid token=token %}
现在我可以在我的 React Router 中使用这个新路径来获取 uid 和令牌,但是当我将数据提交到 api 时,我使用 'proper' url (我的 Django url 模式中的那个)