我一直在用我的项目进行身份验证.我有一个REST api后端,为JWT令牌提供服务.我的前端堆栈是ReactJS,Redux,Axios和Redux Thunk. 我的问题是,为什么当我提交表单时,它不会发送任何凭据? 但是,当
我的问题是,为什么当我提交表单时,它不会发送任何凭据?
但是,当我在credChange上控制记录动作和有效负载时,它似乎是正确的.我不是在某个地方设置州吗?
此外,axios没有捕获400 Bad Request错误.
这是我的代码:
AuthActions.js
export const credChange = ({ prop, value }) => { return { type: CRED_CHANGE, payload: { prop, value }, }; }; export const logoutUser = () => { return (dispatch) => { dispatch({ type: LOGOUT_USER }); }; }; const loginSuccess = (dispatch, response) => { dispatch({ type: LOGIN_USER_SUCCESS, payload: response.data.token, }); }; const loginError = (dispatch, error) => { dispatch({ type: LOGIN_USER_ERROR, payload: error.response.data, }); }; export const loginUser = ({ empNum, password }) => { return (dispatch) => { dispatch({ type: LOGIN_USER }); axios({ method: 'post', url: 'http://127.0.0.1:8000/profiles_api/jwt/authTK/', data: { emp_number: empNum, password, }, }) .then(response => loginSuccess(dispatch, response)) .catch(error => loginError(dispatch, error)); }; };
AuthReducer.js
const INITIAL_STATE = { empNum: '', password: '', empNumErr: null, passwordErr: null, authTK: null, loading: false, }; export default (state = INITIAL_STATE, action) => { switch (action.type) { case CRED_CHANGE: return { ...state, [action.payload.prop]: action.payload.value }; case LOGIN_USER: return { ...state, ...INITIAL_STATE, loading: true, }; case LOGOUT_USER: return { ...state, INITIAL_STATE, }; case LOGIN_USER_SUCCESS: return { ...state, ...INITIAL_STATE, authTK: action.payload, }; case LOGIN_USER_ERROR: return { ...state, ...INITIAL_STATE, empNumErr: action.payload.emp_number, passwordErr: action.payload.password, }; default: return state; } };
LoginForm.js
import React, { Component } from 'react'; import { connect } from 'react-redux'; import { credChange, loginUser, logoutUser, } from '../Actions'; class LoginForm extends Component { constructor() { super(); this.onFormSubmit = this.onFormSubmit.bind(this); this.renderEmpNumErr = this.renderEmpNumErr.bind(this); this.empNumChange = this.empNumChange.bind(this); this.passwordChange = this.passwordChange.bind(this); } onFormSubmit() { const { empNum, password } = this.props; this.props.loginUser({ empNum, password }); } empNumChange(text) { this.props.credChange({ prop: 'empNum', value: text.target.value }); } passwordChange(text) { this.props.credChange({ prop: 'password', value: text.target.value }); } renderEmpNumErr() { if (this.props.empNumErr) { return ( <p> {this.props.empNumErr} </p> ); } return null; } render() { return ( <div> <form onSubmit={this.onFormSubmit}> <label htmlFor="numberLabel">Employee Number</label> <input id="numberLabel" type="password" value={this.props.empNum} onChange={this.empNumChange} /> <label htmlFor="passLabel">Password</label> <input id="passLabel" type="password" value={this.props.password} onChange={this.passwordChange} /> <button type="submit">Login</button> </form> {this.renderEmpNumErr()} </div> ); } } const mapStateToProps = ({ counter }) => { const { empNum, password, loading, empNumErr, passwordErr, authTK, } = counter; return { empNum, password, loading, empNumErr, passwordErr, authTK, }; }; export default connect(mapStateToProps, { credChange, loginUser, logoutUser })(LoginForm);
提交带有凭据的表单后
控制台说:
POST XHR http://127.0.0.1:8000/profiles_api/jwt/authTK/ [HTTP / 1.0 400 Bad Request 5ms]
POST请求原始数据为空,因此未发送凭据.
{“emp_number”:[“此字段为必填项.”],“密码”:[“此字段为必填项.”]}
编辑
如果我能提供任何其他信息,请说明,但我认为这应该足够了.
// dispatch calls the reducer which updates the state dispatch(actionCreator()) // returns an action object, doesn't call reducer actionCreator()
您可以通过调用绑定的操作创建者自动调度操作:
// calls the reducer, updates the state const boundActionCreator = () => {dispatch(actionCreator())} // call boundActionCreator in your component boundActionCreator()
mapDispatchToProps可用于定义绑定的动作创建者(作为道具传递):
const mapDispatchToProps = (dispatch) => { return { credChange: ({ prop, value }) => {dispatch(credChange({prop, value})}, loginUser: ({ empNum, password }) => {dispatch(loginUser({empNum, password})}, logoutUser: () => {dispatch(logoutUser()}, } } export default connect(mapStateToProps, mapDispatchToProps)(LoginForm);
这应该解决状态更新问题,允许从状态(empNumber,密码等)读取的道具也更新.