问题描述
请参阅下面的编辑。
我在我的项目中遇到了重置密码的问题。我可以向用户发送一封电子邮件,其中包含用于使用散列令牌和内部用户 ID 重置密码的链接。
99% 的代码已经完成(后端和前端),唯一的问题是我无法在客户端获取散列令牌和 id 以调用正确的 API 端点等显示用户重置密码的表单,并具有检查令牌、到期日期等的逻辑。
我没有使用 react-router-dom
(尽管我尝试仅将它用于这条路线,但无论如何我都无法使其正常工作)。
`http://localhost:3000/reset-password-form/${hashedResetToken}/${user._id}`
我的路线如下:
router.patch('/reset-password-form/:resetToken/:userId',shopController.resetPasswordPage);
现在,我尝试像这样将 react-router-dom 的功能添加到页面文件夹内的 reset-password-form.js 文件中,如下所示:
import React from 'react';
import ResetPasswordPage from '../components/ResetPasswordPage';
import { browserRouter as Router,Switch,Route} from 'react-router-dom';
const resetPasswordPage = () => {
return (
<>
<Router>
<Switch>
<Route exact path="/reset-password-form/:resetToken/:userId" component={ResetPasswordPage} />
</Switch>
</Router>
<ResetPasswordPage />
</>
)
}
export default resetPasswordPage;
而且,问题是我无法调用正确的 API 端点,因为我无法获得所需的参数。组件看起来像这样(它只是几行代码,而不是整个组件):
fetchData = e => {
e.preventDefault();
const resetToken = this.props.match.params.resetToken;
const userId = this.props.match.params.userId;
fetch(`http://localhost:8090/reset-password-form/${resetToken}/${userId}`,{
如何在客户端获取这些参数?
编辑:
所以现在我按照建议使用 next/router
。
首先,我注意到如果令牌被 /
内的 next/router
散列将无法读取令牌,并且它给我一个 404 页面(可能是因为它认为有超过2 个参数?)。我尝试在没有 /
的情况下调整路线但没有成功。
出于调试目的,我进入 pages 文件夹的 reset-password-form/[resetToken]/[userId].js
如下所示:
const resetPasswordPage = () => {
const router = useRouter();
return (
<>
<p>user id: {router.query.userId}</p>
<p>token: {router.query.resetToken}</p>
</>
)
}
这给了我散列令牌(仅当它在内部没有 /
的情况下生成,否则我会得到一个 404 页面)和 userId
。
调试后,我删除了 2 个 p
标签,并在 return 中传递了 ResetPasswordPage
组件,将我需要的参数作为道具传递并像这样获取它们(ResetPasswordPage
组件):
fetchData = e => {
e.preventDefault();
const resetToken = this.props.resetToken;
const userId = this.props.userId;
fetch(`http://localhost:8090/reset-password-form/${resetToken}/${userId}`,{
但如果我这样做,我会得到 Error: React.Children.only expected to receive a single React element child
。
如果我从 ResetPasswordPage
组件中删除其他 2 个子项,我想要的页面将被呈现(同样,仅当生成的令牌没有 /
时)。有没有办法渲染其他 2 个孩子(我在 3 个组件之间有 > 标签)?这些对于页面的工作很重要(它们会显示导航链接和错误/成功消息)。
如何避免这样一个事实:如果令牌被 /
散列,用户将获得 404 页面?
编辑 2.0
ResetPasswordPage
组件的完整代码:
import React,{ Component } from 'react';
import Link from 'next/link';
import Form from '../components/styles/Form';
import logo from '../components/styles/logo';
import MessageStyles from '../components/styles/MessageStyles';
class ResetPasswordPage extends Component {
state = {
loading: false,message: null,password: '',confirmPassword: '',}
handleChange = e => {
this.setState({ [e.target.name]: e.target.value });
}
fetchData = e => {
e.preventDefault();
const resetToken = this.props.resetToken;
const userId = this.props.userId;
fetch(`http://localhost:8090/reset-password-form/${resetToken}/${userId}`,{
method: 'PATCH',headers: {
'Accept': 'application/json','Content-Type': 'application/json',},credentials: 'include',body: JSON.stringify({
password: this.state.password,confirmPassword: this.state.confirmPassword,})
})
.then(res => {
return res.json();
})
.then(resData => {
console.log(resData);
})
.then(() => {
setTimeout(() => {
window.location.replace('/auth/login');
},3000);
})
.catch(err => console.log(err))
}
render() {
return (
<>
<logo> // by removing only the logo component with the link inside I solved the issue of Error: React.Children.only expected to receive a single React element child
<Link href="/shop" />
</logo>
<MessageStyles><p id="message-test">{this.state.message}</p></MessageStyles>
<Form onSubmit={this.fetchData}>
<fieldset aria-busy={this.state.loading} disabled={this.state.loading}>
<h1>Chang{this.state.loading ? 'ing' : 'e'} Your Password</h1>
<label htmlFor="password">
<input
name="password"
type="password"
onChange={this.handleChange}
value={this.state.password}
className={this.state.password.length < 5 ? 'invalid' : '' }
/>
</label>
<label htmlFor="confirm password">
<input
name="confirmPassword"
type="password"
onChange={this.handleChange}
value={this.state.confirmPassword}
className={this.state.password !== this.state.confirmPassword ? 'invalid' : '' }
/>
</label>
<button>Chang{this.state.loading ? 'ing' : 'e'} Your Password</button>
</fieldset>
</Form>
</>
)
}
}
export default ResetPasswordPage;
因此,如果我删除 logo
并且 MessageStyle
页面被呈现。
解决方法
所以为了解决这个问题,我做了以下事情:
将文件 reset-password-form.js 重命名为 pages 文件夹,如“reset-password-form/[resetToken]/[userId].js”。
reset-password-form/[resetToken]/[userId].js 看起来像这样:
import React from 'react';
import { useRouter } from 'next/router';
import ResetPasswordPage from '../../../components/ResetPasswordPage';
const resetPasswordPage = () => {
const router = useRouter();
return (
<ResetPasswordPage userId={router.query.userId} resetToken={router.query.resetToken} />
)
}
export default resetPasswordPage;
进入ResetPasswordPage,我通过像这样从道具中获取我需要的参数:
resetToken = this.props.resetToken;
userId = this.props.userId;
对于令牌中的 / ,您需要对令牌 encodeURIComponent 和 decodeURIComponent 进行编码/解码
,Tms 给我发了这个链接,他说你遇到了这个问题。我不是专业人士,但尝试从 Route 组件中删除“精确”。由于它是一条动态路径,因此可能是触发问题的原因。
我记不太清了,但您可能也不需要自闭式 <ResetPasswordPage />
。你已经在Route中通过了。(我想我也遇到了类似的问题)
我正在回答关于您的 /
问题的问题,因为您在一个帖子中有多个编辑和多个问题。
您可以使用 encodeURIComponent 对包含“/”的令牌进行编码。
const token = `token1with/init`
console.log(`token`,token)
console.log(`encodeUri`,encodeURIComponent(token))
您应该在通过电子邮件发送令牌之前对令牌进行编码。