堆栈内存溢出
  繁体   English   中英

条件重定向不起作用，如何在成功注册后进行重定向？

[英]Conditional redirect is not working, how to redirect on successful registration?

 原文  2019-08-01 05:40:41  1   2    javascript/ node.js/ reactjs/ redirect/ react-router-dom

问题描述

我正在使用登录API并将其连接到我的前端。 成功注册后，我希望我的页面在注册后重定向到登录名

我尝试了许多解决方案。 没有工作。 注册正在成功进行。 从API端登录控制台： 

registerAPI: { username: 'newuser3', password: 'newuser3', 
redirect: false }
{ _id: 5d4276f958c094127f74a2f3,
username: 'newuser3',
password: 
'$2a$10$okji6W0OzTIaE.sQXJAYv.ckcmuRYcHAjKB6Nr6m.HVdBksWYT70u',
hash: '$2a$10$okji6W0OzTIaE.sQXJAYv.' }

前端控制台： 

Navigated to http://localhost:3000/signupemail?
VM602 bundle.js:59399 try registering :  {username: "newuser3", 
password: "newuser3", redirect: false}
2Navigated to http://localhost:3000/signupemail?

这是我的构造函数 

constructor(props) {
super(props);
this.state = {
  username: "",
  password: "",
  redirect: false
};
}

这是在表单上提交的句柄 

handleSubmit = event => {
console.log("try registering : ", this.state);
axios
  .post("http://localhost:3044/register", this.state)
  .then(function(response) {
    console.log(response.status);
    if (response.status === 200) {
      console.log("registered");
      this.setState({
        redirect: true
      });
    }
  })
  .catch(function(error) {
    console.log(error);
  });

};

这是我提交注册表或重定向的前几行 

render() {
if (this.state.redirect) {
  return <Redirect to="/loginemail" />;
}
return (
  // <Layout>
  <div className="Login">
//rest of the form and divs (rendering perfectly ok)
<link
      href="https://bootswatch.com/4/simplex/bootstrap.min.css"
      rel="stylesheet"
    />
    <div style={indivStyle}>
      <h1> Sign up with email </h1>
      <br />
    {/* <p
      style={{
        fontSize: "16px",
        paddingRight: "10px",
        paddingLeft: "10px"
      }}
    >
      Enter the email address associated with your account, and we’ll send
      a magic link to your inbox.
    </p> */}
      <div
        style={{
          padding: "15px",
          marginRight: "60px",
          marginLeft: "60px"
        }}
      >
        <p
          style={{
            color: "grey",
            fontSize: "12px",
            paddingRight: "10px",
            paddingLeft: "10px"
          }}
        >
          Your username
        </p>
        <div className="form-group">
          <form onSubmit={this.handleSubmit}>
            <input
              type="text"
              onChange={this.handleUnameChange}
              className="form-control"
              style={{ border: "none", borderBottom: "1px solid" }}
            />
            <br />
            <br />
            <p
              style={{
                color: "grey",
                fontSize: "12px",
                paddingRight: "10px",
                paddingLeft: "10px"
              }}
            >
              Password
            </p>
            <input
              type="text"
              onChange={this.handlePassChange}
              className="form-control"
              style={{ border: "none", borderBottom: "1px solid" }}
            />
            <br />
            <button
              type="submit"
              style={{
                color: "white",
                backgroundColor: "black",
                borderColor: "black"
              }}
              className="btn btn-lg "
            >
              Continue
            </button>
          </form>
        </div>
        <div>{this.state.redir}</div>
        <br />
        <p style={{ fontSize: "13px" }}>
          <Link style={{ color: "teal" }} to="/getstarted">
            ← All sign up options
          </Link>
        </p>
      </div>
    </div>
  </div>
);
}

期望呈现登录

request：被调用两次。 第一个状态为200，第二个状态为“已取消”

两个实例： 

Request URL: http://localhost:3044/register
Referrer Policy: no-referrer-when-downgrade
Provisional headers are shown
Accept: application/json, text/plain, */*
 Content-Type: application/json;charset=UTF-8
Origin: http://localhost:3000
Referer: http://localhost:3000/signupemail?
User-Agent: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, 
like Gecko) Chrome/75.0.3770.142 Safari/537.36
{username: "", password: "", redirect: false}
password: ""
redirect: false
username: ""

首次请求电话： 

Request URL: http://localhost:3044/register
Request Method: OPTIONS
Status Code: 200 OK
Remote Address: [::1]:3044
Referrer Policy: no-referrer-when-downgrade

第二个请求调用：（不确定为什么调用两次） 

Request URL: http://localhost:3044/register
Referrer Policy: no-referrer-when-downgrade
Provisional headers are shown
Accept: application/json, text/plain, */*
Content-Type: application/json;charset=UTF-8
Origin: http://localhost:3000
Referer: http://localhost:3000/signupemail?
User-Agent: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, 
like Gecko) Chrome/75.0.3770.142 Safari/537.36
{username: "Newuser14", password: "newuser14", redirect: false}
password: "newuser14"
redirect: false
username: "Newuser14"

一些日志： 

logs(){ 
VM3928 bundle.js:26 XHR finished loading: GET 
"http://localhost:3000/b9fefce4d0ef18cb1a0b.hot-update.json".
hotDownloadManifest @ VM3928 bundle.js:26
hotCheck @ VM3928 bundle.js:245
tryApplyUpdates @ VM3928 bundle.js:911
handleSuccess @ VM3928 bundle.js:782
connection.onmessage @ VM3928 bundle.js:855
EventTarget.dispatchEvent @ VM3928 bundle.js:3007
  (anonymous) @ VM3928 bundle.js:6216
SockJS._transportMessage @ VM3928 bundle.js:6214
EventEmitter.emit @ VM3928 bundle.js:2942
(anonymous) @ VM3928 bundle.js:3170
EventEmitter.emit @ VM3928 bundle.js:2942
(anonymous) @ VM3928 bundle.js:3327
EventEmitter.emit @ VM3928 bundle.js:294
    XhrReceiver._chunkHandler @ VM3928 bundle.js:3412
EventEmitter.emit @ VM3928 bundle.js:2942
xhr.onreadystatechange @ VM3928 bundle.js:3569
XMLHttpRequest.send (async)
AbstractXHRObject._start @ VM3928 bundle.js:3594
(anonymous) @ VM3928 bundle.js:3487
setTimeout (async)
AbstractXHRObject @ VM3928 bundle.js:3486
AbstractXHRObject._start @ abstract-xhr.js:128
(anonymous) @ abstract-xhr.js:21
setTimeout (async)
AbstractXHRObject @ abstract-xhr.js:20
XHRLocalObject @ xhr-local.js:8
InfoAjax @ info-ajax.js:19
InfoReceiver._getReceiver @ info-receiver.js:36
InfoReceiver.doXhr @ info-receiver.js:56
(anonymous) @ info-receiver.js:25
setTimeout (async)
InfoReceiver @ info-receiver.js:24
SockJS @ main.js:122
(anonymous) @ webpackHotDevClient.js:142
__webpack_require__ @ bootstrap 4820ba57e6e007595bd9:555
fn @ bootstrap 4820ba57e6e007595bd9:86
    (anonymous) @ bootstrap 4820ba57e6e007595bd9:578
    __webpack_require__ @ bootstrap 4820ba57e6e007595bd9:555
(anonymous) @ bootstrap 4820ba57e6e007595bd9:578
(anonymous) @ bootstrap 4820ba57e6e007595bd9:578

    XHRCorsObject @ VM3928 bundle.js:3450
    XhrReceiver @ VM3928 bundle.js:3382
    Polling._scheduleReceiver @ VM3928 bundle.js:3323
    Polling @ VM3928 bundle.js:3315
    SenderReceiver @ VM3928 bundle.js:3167
    AjaxBasedTransport @ VM3928 bundle.js:3133
    XhrStreamingTransport @ VM3928 bundle.js:3053
    SockJS._connect @ VM3928 bundle.js:6161
    SockJS._transportClose @ VM3928 bundle.js:6241
    SockJS._transportTimeout @ VM3928 bundle.js:6175
    setTimeout (async)
    SockJS._connect @ VM3928 bundle.js:6156
    SockJS._receiveInfo @ VM3928 bundle.js:6136
    g @ VM3928 bundle.js:2928
    EventEmitter.emit @ VM3928 bundle.js:2942
    (anonymous) @ VM3928 bundle.js:7121
    g @ VM3928 bundle.js:2928
    EventEmitter.emit @ VM3928 bundle.js:2942
    (anonymous) @ VM3928 bundle.js:7343
    g @ VM3928 bundle.js:2928
    EventEmitter.emit @ VM3928 bundle.js:2942
    xhr.onreadystatechange @ VM3928 bundle.js:3586
    XMLHttpRequest.send (async)
    AbstractXHRObject._start @ VM3928 bundle.js:3594
    (anonymous) @ VM3928 bundle.js:3487
    setTimeout (async)
    AbstractXHRObject @ VM3928 bundle.js:3486
    XHRLocalObject @ VM3928 bundle.js:3669
    InfoAjax @ VM3928 bundle.js:7325
    InfoReceiver._getReceiver @ VM3928 bundle.js:7090
    InfoReceiver.doXhr @ VM3928 bundle.js:7110
    (anonymous) @ VM3928 bundle.js:7079
    setTimeout (async)
    InfoReceiver @ VM3928 bundle.js:7078
    SockJS @ VM3928 bundle.js:6064
    (anonymous) @ VM3928 bundle.js:742
    __webpack_require__ @ VM3928 bundle.js:556
    fn @ VM3928 bundle.js:87
    (anonymous) @ VM3928 bundle.js:589
    __webpack_require__ @ VM3928 bundle.js:556
    (anonymous) @ VM3928 bundle.js:579
    (anonymous) @ VM3928 bundle.js:582
    VM3928 bundle.js:3594 XHR failed loading: POST "http://localhost:3000/sockjs-node/173/wjddrgzb/xhr_streaming?t=1564659551778".
    AbstractXHRObject._start @ VM3928 bundle.js:3594
    (anonymous) @ VM3928 bundle.js:3487
    setTimeout (async)
    AbstractXHRObject @ VM3928 bundle.js:3486
    XHRCorsObject @ VM3928 bundle.js:3450
    XhrReceiver @ VM3928 bundle.js:3382
    Polling._scheduleReceiver @ VM3928 bundle.js:3323
    Polling @ VM3928 bundle.js:3315
    SenderReceiver @ VM3928 bundle.js:3167
    AjaxBasedTransport @ VM3928 bundle.js:3133
    XhrStreamingTransport @ VM3928 bundle.js:3053
    SockJS._connect @ VM3928 bundle.js:6161
    SockJS._transportClose @ VM3928 bundle.js:6241
    SockJS._transportTimeout @ VM3928 bundle.js:6175
    setTimeout (async)
    SockJS._connect @ VM3928 bundle.js:6156
    SockJS._receiveInfo @ VM3928 bundle.js:6136
    g @ VM3928 bundle.js:2928
    EventEmitter.emit @ VM3928 bundle.js:2942
    (anonymous) @ VM3928 bundle.js:7121
    g @ VM3928 bundle.js:2928
    EventEmitter.emit @ VM3928 bundle.js:2942
    (anonymous) @ VM3928 bundle.js:7343
    g @ VM3928 bundle.js:2928
    EventEmitter.emit @ VM3928 bundle.js:2942
    xhr.onreadystatechange @ VM3928 bundle.js:3586
    XMLHttpRequest.send (async)
    AbstractXHRObject._start @ VM3928 bundle.js:3594
    (anonymous) @ VM3928 bundle.js:3487
    setTimeout (async)
    AbstractXHRObject @ VM3928 bundle.js:3486
    XHRLocalObject @ VM3928 bundle.js:3669
    InfoAjax @ VM3928 bundle.js:7325
    InfoReceiver._getReceiver @ VM3928 bundle.js:7090
    InfoReceiver.doXhr @ VM3928 bundle.js:7110
    (anonymous) @ VM3928 bundle.js:7079
    setTimeout (async)
    InfoReceiver @ VM3928 bundle.js:7078
    SockJS @ VM3928 bundle.js:6064
    (anonymous) @ VM3928 bundle.js:742
    __webpack_require__ @ VM3928 bundle.js:556
    fn @ VM3928 bundle.js:87
    (anonymous) @ VM3928 bundle.js:589
    __webpack_require__ @ VM3928 bundle.js:556
    (anonymous) @ VM3928 bundle.js:579
    (anonymous) @ VM3928 bundle.js:582
    Navigated to http://localhost:3000/signupemail
    VM3945 bundle.js:3594 XHR finished loading: GET "http://localhost:3000/sockjs-node/info?t=1564659612053".
    AbstractXHRObject._start @ VM3945 bundle.js:3594
    (anonymous) @ VM3945 bundle.js:3487
    setTimeout (async)
    AbstractXHRObject @ VM3945 bundle.js:3486
    XHRLocalObject @ VM3945 bundle.js:3669
    InfoAjax @ VM3945 bundle.js:7325
    InfoReceiver._getReceiver @ VM3945 bundle.js:7090
    InfoReceiver.doXhr @ VM3945 bundle.js:7110
    (anonymous) @ VM3945 bundle.js:7079
    setTimeout (async)
    InfoReceiver @ VM3945 bundle.js:7078
    SockJS @ VM3945 bundle.js:6064
    (anonymous) @ VM3945 bundle.js:742
    __webpack_require__ @ VM3945 bundle.js:556
    fn @ VM3945 bundle.js:87
    (anonymous) @ VM3945 bundle.js:589
    __webpack_require__ @ VM3945 bundle.js:556
    (anonymous) @ VM3945 bundle.js:579
    (anonymous) @ VM3945 bundle.js:582
    VM3945 bundle.js:59646 try registering :  {username: "saloniuser", password: "saloniuser", redirect: false}
    VM3945 bundle.js:61076 XHR finished loading: OPTIONS "http://localhost:3044/register".
    dispatchXhrRequest @ VM3945 bundle.js:61076
    xhrAdapter @ VM3945 bundle.js:60915
    dispatchRequest @ VM3945 bundle.js:60696
    Promise.then (async)
    request @ VM3945 bundle.js:60454
    Axios.<computed> @ VM3945 bundle.js:60479
    wrap @ VM3945 bundle.js:60370
    LoginEmail._this.handleSubmit @ VM3945 bundle.js:59647
    callCallback @ VM3945 bundle.js:13280
    invokeGuardedCallbackDev @ VM3945 bundle.js:13330
    invokeGuardedCallback @ VM3945 bundle.js:13387
    invokeGuardedCallbackAndCatchFirstError @ VM3945 bundle.js:13401
    executeDispatch @ VM3945 bundle.js:13692
    executeDispatchesInOrder @ VM3945 bundle.js:13714
    executeDispatchesAndRelease @ VM3945 bundle.js:13811
    executeDispatchesAndReleaseTopLevel @ VM3945 bundle.js:13819
    forEachAccumulated @ VM3945 bundle.js:13793
    runEventsInBatch @ VM3945 bundle.js:13947
    runExtractedEventsInBatch @ VM3945 bundle.js:13955
    handleTopLevel @ VM3945 bundle.js:17957
    batchedUpdates$1 @ VM3945 bundle.js:33570
    batchedUpdates @ VM3945 bundle.js:15282
    dispatchEvent @ VM3945 bundle.js:18036
    (anonymous) @ VM3945 bundle.js:33621
    unstable_runWithPriority @ VM3945 bundle.js:34689
    interactiveUpdates$1 @ VM3945 bundle.js:33620
    interactiveUpdates @ VM3945 bundle.js:15301
    dispatchInteractiveEvent @ VM3945 bundle.js:18013
    XHR failed loading: POST "http://localhost:3044/register".
    Navigated to http://localhost:3000/signupemail?
    abstract-xhr.js:128 XHR finished loading: GET                                 "http://localhost:3000/sockjs-node/info?t=1564659645382".

}

2 个解决方案

解决方案1
 0  2019-08-02 09:00:07

“ :: 1”是127.0.0.1的ipv6版本。 可能是尝试与IPV6连接的套接字，因此请确保已启用它。 远端地址：[:: 1]：3044

解决方案2
 0  2019-08-06 04:54:55

当您尝试使用this.setState将redirect设置为true ，请尝试将handleSubmit函数更改为- 

axios
  .post("http://localhost:3044/register", this.state)
  .then(response => { // change it to an arrow function
    console.log(response.status);
    if (response.status === 200) {
      this.setState({
        redirect: true
      });
    }
  })
  .catch(function(error) {
    console.log(error);
  });

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 成功注册后重定向 成功登录后如何重新加载/重定向页面？ 登录成功后如何重定向到一个页面：ReactJS？ 成功登录后如何重定向用户？ 使用 React 成功登录后如何重定向用户 成功登录ReactJS后如何重定向到主页？ 如何在react js中成功登录后重定向 ReactJS成功登录后如何重定向到页面？ 注册后Facebook重定向 如何知道注册是否成功
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM