登录“onSuccess”导航到另一页。 React

所以我希望能够在用户成功登录后进入主页面。对于React，我还是个新手。如何才能做到这一点。我也在使用v4的反应。当我点击登录按钮时，它似乎触发了操作，但没有完成它。登录“onSuccess”导航到另一页。 React

这里是处理登录的动作：

const mainPage = (response, dispatch) => { 
if(POST_DATA_SUCCESS) { 
    this.props.history.push('/main'); 
} 
dispatch({ 
    type: POST_DATA_SUCCESS, 
    response, 
}); 
}; 

export function loginUser(username1, password1) { 
const promise = fetch('http://localhost:8080/users/login', { 
method: 'POST', 
headers: { 
    'Accept': 'application/json', 
    'Content-Type': 'application/json', 
    'Authorization': 'Basic ' + btoa(username1 + ":" + password1), 
}, 
body: JSON.stringify({ 
    username: username1, 
    password: password1, 
}) 
}); 
return { 
    onRequest: POST_DATA_TRIGGERED, 
    onSuccess: mainPage, 
    onFailure: POST_DATA_FAILURE, 
    promise, 
}; 
}

这里是处理登录请求后端：

router.get('/login', 
passport.authenticate('basic', {session: false}), 
(req, res) => res.json({user: req.user.apiRepr()}) 
); 

router.post('/login', function (req, res, next) { 
passport.authenticate('basic', function (err, user, info) { 
    if (err) { 
     return console.log(err); 
    } 
    if (!user) { 
     return res.status(401).json({ 
      message: 'Username/Password Incorrect' 
     }); 
    } 
    req.logIn(user, function (err) { 
     if (err) { 
      return console.log(err); 
     } 
     return res.status(200).json({ 
      user: user.username 
     }); 
    }); 
})(req, res, next); 
});

以及登录组分与形式：

import React from 'react'; 
import {BrowserRouter as Router, Route, Link} from 'react-router-dom'; 
import { loginUser } from '../actions'; 
import { connect } from 'react-redux'; 

export class Login extends React.Component { 
constructor(props) { 
    super(props); 
    this.state = { 
    //username: '', 
    //password: '', 
} 
} 

render() { 
return(
<form> 
    <h3>Login to start your Journey</h3> 
    <input placeholder="username" ref={input => {this.username = input}}> 
    </input> 
    <input placeholder="password" type="password"ref={input => {this.password 
    = input}}></input> 
    <button onClick={this.login.bind(this)}>Login</button> 
</form> 
) 
} 

login() { 
const userName = this.username.value; 
const passWord = this.password.value; 
console.log(userName); 
console.log(passWord); 
this.props.loginUser(userName, passWord); 
} 
} 

export default connect(null, { loginUser })(Login);

来源

2017-06-05 JontheNerd

你用什么中间件处理包含在承诺的对象你的'loginUser'动作创造者？你使用'redux-promise'吗？ –

在您的mainPage动作创建者中，您使用对道具进行了参考假设它绑定到组件实例。不是。

const mainPage = (response, dispatch) => { 
    if(POST_DATA_SUCCESS) { 
     this.props.history.push('/main'); // 'this' here does not refer to the React component instance 
    } 
    dispatch({ 
     type: POST_DATA_SUCCESS, 
     response, 
    }); 
    };

如果使用react-router V4，您可以使用react-router-redux，并导入push这是一个创造者的行动将被路由器减速处理。你需要设置你的终极版商店请先按照步骤here

import { push } from 'react-router-redux' 

const mainPage = (response, dispatch) => { 
    if(POST_DATA_SUCCESS) { 
     dispatch(push('/main')); 
    } 
    dispatch({ 
     type: POST_DATA_SUCCESS, 
     response, 
    }); 
};

来源

2017-06-05 04:30:38

您可以利用redux-little-router派遣push行动，像这样：

export function navigateAbout(string) { 
    return (dispatch) => { 
    dispatch(someOtherAction(string)); <--- other action you want to do 
    dispatch(push('/about')) <--- your navigation action 
    } 
}

来源

2017-06-07 06:44:26 justrossthings

登录“onSuccess”导航到另一页。 React

回答

相关问题