路由在ReactJ和React-Router-dom V4中处理特定于用户的独特产生的URL

Question

在应用程序中，如果用户忘记了密码，他们正在处理，他们单击将它们带到输入用户名的页面的链接。如果匹配用户名，它将向与用户名相关的电子邮件发送一个唯一生成的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："好吧，键已在数据库中进行了验证。完成加载组件。"

我认为这通常会看起来像：

// ./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

1. 您可以像这样从路径中获取参数（https://reaecttraining.com/react-router/web/api/route）：

   <Route path="/user/:username" component={User}/>
   const User = ({ match }) => <h1>Hello {match.params.username}!</h1>
   

2. 您将需要根据VerifyKey设置的某些状态有条件地渲染。

   componentWillMount() {
     this.props.verifyKey(this.props.match.params.key);
   }
   render() {
     if (this.state.permitRender) {
       return <Component>
     } else {
       return <LoadingComponent />
   }
   

Answer 2

您可以在路由上使用渲染方法来放入验证逻辑并渲染适当的控件。您需要移动操作以将键验证到呈现路线的组件，而不是安全标语组件。

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

Answer 3

路由参数将在 match.params prop：

内

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

请参阅https://reacttraining.com/react-router/web/example/url-params

-

然后，关于您的安全问题的成功，我将在您的还原器中设置一些状态，并基于此设置。