路由在 ReactJS 和 react-router-dom v4 中处理特定于用户的唯一生成的 URL

Question

在我正在开发的应用程序中，如果用户忘记了密码，他们会单击 link，将他们带到输入用户名的页面。如果用户名匹配，它会发送一个唯一生成的 URL 到与用户名关联的电子邮件。例如：

http://localhost:8000/auth/security_questions/0e51706361e7a74a550e995b415409fdab4c66f0d201c25cb4fa578959d11ffa

所有这些工作正常，但我正在尝试弄清楚如何使用 React 和 react-router-dom v4 在前端路由上处理这个问题。我做了这条路线。

<Route exact path='/auth/security_questions/:key' component={SecurityQuestions} />

与安全问题相关的正确组件加载，但这不是我所追求的行为。毕竟，它需要你放在 security_questions/.

之后的任何内容

它应该做的是在加载组件之前将 :key 与数据库匹配。

我不确定一些事情：

1) 如何解析 :key 部分，以便我可以将其作为值传递以验证数据库。

2) 虽然我对如何处理验证有一个大致的了解，但我不确定如何告诉 React："Ok, the key has been verified in the database. Finish loading the component."

我认为它通常看起来像：

// ./containers/security_questions.js

componentWillMount() {
    this.props.verifyKey(:key);
}

然后操作：

// ./actions/authentication.index.js

export function verifyKey({ :key }) {
    return function(dispatch) {
        axios
            .post(
                `${ROOT_URL}/api/auth/security_questions/`, 
                { :key }
            )
            .then(response => {

                dispatch('Finish loading the rest of the component')
            })
            .catch(error => {
                dispatch(authError(error.response.data.non_field_errors[0]));
            });
    }
}

或者与其完成加载组件，不如路由到另一个受保护的 URL 路由。

Answer 1

路由参数将在 match.params 属性中：

componentWillMount() {
  this.props.verifyKey(this.props.match.params.key);
}

见https://reacttraining.com/react-router/web/example/url-params

--

然后在你的安全问题成功后，我会在你的减速器中设置一些状态并根据它进行渲染。

Answer 2

您可以像这样从路径中获取参数 (https://reacttraining.com/react-router/web/api/Route):

<Route path="/user/:username" component={User}/>

const User = ({ match }) => <h1>Hello {match.params.username}!</h1>

您将希望根据 verifyKey 设置的某些状态有条件地呈现。

componentWillMount() {
  this.props.verifyKey(this.props.match.params.key);
}

render() {
  if (this.state.permitRender) {
    return <Component>
  } else {
    return <LoadingComponent />
}

Answer 3

您可以在路由上使用 render 方法来放入您的验证逻辑并呈现适当的控件。您需要将验证密钥的操作移至呈现路由的组件，而不是 SecurityQuestions 组件。

<Route exact 
    path='/auth/security_questions/:key' 
    render={(props)=>{
         let finalComponent= <ComponentToRenderWhenKeyDoesNotMatch/>;
         if(this.props.verifyKey(props.match.params.key)){
              resultantComponent=<SecurityQuestions/>
         }
         return finalComponent;
     }}
/>

路由在 ReactJS 和 react-router-dom v4 中处理特定于用户的唯一生成的 URL

Route handling a uniquely generated URL specific to a user in ReactJS and react-router-dom v4

reactjs

react-router-dom