[英]Rendering error messages from failed authentication in React-Redux and React Router DOM v4
TL;DR version: In a React-Redux project with React Router DOM v4 how do I take the server response from an axios.put
in an ./actions
file and import into my "smart components" in ./containers
so it can be used in auth logic and rendered as messages for the user (eg, "Invalid credentials"). TL; DR版本:在与阵营,终极版的项目做出反应路由器DOM V4我如何采取从服务器响应
axios.put
在./actions
文件,并导入到我的“智能部件”一./containers
所以可以在身份验证逻辑中使用并呈现为用户消息(例如,“无效凭据”)。
Long version: So I have been learning React-Redux and started with the Stephen Grider courses on Udemy. 加长版:所以我一直在学习React-Redux,并从Udemy的Stephen Grider课程开始。 What is adding to my confusion stems from the fact that the intro/intermediate course is in
React Router DOM v4
and the advanced course is in React Router v2
. 使我感到困惑的原因是,入门/中级课程是在
React Router DOM v4
,而高级课程是在React Router v2
。 Spending a lot of time converting over to v4
. 花费大量时间转换到
v4
。
Anyway, getting protected routes and rerouting after successful login stuff sorted at. 无论如何,在成功登录后进行排序后,获得受保护的路由并重新路由。 The problem I have now is getting responses from the server into a Redux-React container.
我现在遇到的问题是将来自服务器的响应放入Redux-React容器中。
For example, if the login credentials are wrong, the login API responds with a 400 error. 例如,如果登录凭据错误,则登录API会返回400错误。 I should be able to take this response and render a message like
The credentials provided are invalid
. 我应该能够接受此响应并呈现一条消息,例如
The credentials provided are invalid
。 I can get the response in my ./actions/authentication
file and console.log()
it, but just can't get it into the ./containers/authentication/signin.js
. 我可以在
./actions/authentication
文件中获取响应,并在console.log()
它,但是无法将其获取到./containers/authentication/signin.js
。
The Stephen Grider tuts using React Router v2
work fine. 使用
React Router v2
的Stephen Grider tutu可以正常工作。 Here is the code from his project, followed by mine: 这是他的项目中的代码,后面是我的代码:
// ./actions/index.js
import axios from 'axios';
import { browserHistory } from 'react-router';
import {
AUTH_USER,
UNAUTH_USER,
AUTH_ERROR,
FETCH_MESSAGE
} from './types';
const ROOT_URL = 'http://localhost:3090';
export function signinUser({ email, password }) {
return function(dispatch) {
axios.post(`${ROOT_URL}/signin`, { email, password })
.then(response => {
dispatch({ type: AUTH_USER });
localStorage.setItem('token', response.data.token);
// The below no longer works as of React Router DOM v4
browserHistory.push('/feature');
})
.catch(() => {
dispatch(authError('Bad Login Info'));
});
}
}
export function authError(error) {
return {
type: AUTH_ERROR,
payload: error
};
}
// ./components/auth/signin.js
import React, { Component } from 'react';
import { reduxForm } from 'redux-form';
import * as actions from '../../actions';
class Signin extends Component {
handleFormSubmit({ email, password }) {
// Need to do something to log user in
this.props.signinUser({ email, password });
}
renderAlert() {
if (this.props.errorMessage) {
return (
<div className="alert alert-danger">
<strong>Oops!</strong> {this.props.errorMessage}
</div>
);
}
}
render() {
const { handleSubmit, fields: { email, password }} = this.props;
return (
<form onSubmit={handleSubmit(this.handleFormSubmit.bind(this))}>
<fieldset className="form-group">
<label>Email:</label>
<input {...email} className="form-control" />
</fieldset>
<fieldset className="form-group">
<label>Password:</label>
<input {...password} type="password" className="form-control" />
</fieldset>
{this.renderAlert()}
<button action="submit" className="btn btn-primary">Sign in</button>
</form>
);
}
}
function mapStateToProps(state) {
return { errorMessage: state.auth.error };
}
export default reduxForm({
form: 'signin',
fields: ['email', 'password']
}, mapStateToProps, actions)(Signin);
// ./reducers/index.js
import {
AUTH_USER,
UNAUTH_USER,
AUTH_ERROR,
FETCH_MESSAGE
} from '../actions/types';
import { combineReducers } from 'redux';
import { reducer as form } from 'redux-form';
import authReducer from './auth_reducer';
const rootReducer = combineReducers({
form,
auth: authReducer
});
export default rootReducer;
export default function(state = {}, action) {
switch(action.type) {
case AUTH_USER:
return { ...state, error: '', authenticated: true };
case UNAUTH_USER:
return { ...state, authenticated: false };
case AUTH_ERROR:
return { ...state, error: action.payload };
case FETCH_MESSAGE:
return { ...state, message: action.payload };
}
return state;
}
Mine is just slightly modified due to trying to get this working with React Router DOM v4
. 由于试图将其与
React Router DOM v4
一起使用,因此对Mine进行了少许修改。 I put comments in the code that may be of some interest. 我在代码中添加了一些有趣的注释。 The
./reducers
have been unchanged except for import... from
. ./reducers
保持不变,只是import... from
// ./actions/authentication/index.js
import axios from 'axios';
import { ROOT_URL } from '../../../config/settings/secrets.json';
const AUTH_USER = 'auth_user';
const UNAUTH_USER = 'unauth_user';
const AUTH_ERROR = 'auth_error';
export function signinUser({ username, password }) {
return function(dispatch) {
axios.post(`${ROOT_URL}/api/auth/token/`, { username, password })
.then(response => {
dispatch({ type: AUTH_USER });
localStorage.setItem('token', response.data.token);
})
.catch(() => {
dispatch(authError('Bad Login Info'));
});
}
}
export function authError(error) {
// Can console.log() this out and payload does show 'Bad Login Info'
// How to get it innto the signin.js container though?
return {
type: AUTH_ERROR,
payload: error
};
}
// ./containers/authentication/signin.js
import React, { Component } from 'react';
import { reduxForm, Field } from 'redux-form';
import { connect } from 'react-redux';
import { withRouter } from 'react-router-dom';
import * as actions from '../../actions/authentication';
const renderInput = field => {
const { input, type } = field;
return (
<div>
<input {...input} type={type} className='form-control' />
</div>
);
}
class Signin extends Component {
handleFormSubmit({ username, password }) {
this.props.signinUser({ username, password });
// This is a bad idea since it will pass anything if username and password is entered
// Thus why trying to take the server response and use that
if (username !== undefined && password !== undefined) {
this.props.history.push('/home');
}
}
renderAlert(errorMessage) {
// Cannot console.log() any of this out
// this.renderAlert() doesn't seem to be getting triggered
if (errorMessage) {
return (
<div className="alert alert-danger">
<strong>Oops!</strong> {this.props.errorMessage}
</div>
);
}
}
render() {
const { handleSubmit } = this.props;
return (
<form onSubmit={handleSubmit(this.handleFormSubmit.bind(this))}>
<div className="form-group">
<label>Username:</label>
<Field name='username' type='username' component={renderInput} />
</div>
<div className="form-group">
<label>Password:</label>
<Field name='password' type='password' component={renderInput} />
</div>
{this.renderAlert()}
<button action="submit" className="btn btn-primary">Sign in</button>
</form>
);
}
}
function mapStateToProps(state) {
console.log(state);
return { errorMessage: state.auth.error };
}
Signin = connect(mapStateToProps, actions)(Signin);
Signin = reduxForm({
form: 'signin'
})(Signin);
export default withRouter(Signin);
Edit: Consulting this image as refresher for the React-Redux data flow. 编辑:咨询此图像作为React-Redux数据流的更新。 Seems like most everything is working up to getting it back into the
container
, so is mapStateToProps
failing somehow? 似乎大多数事情都在努力使其重新回到
container
,所以mapStateToProps
是否会mapStateToProps
某种mapStateToProps
而失败?
Oh man, I wasn't exporting my action types ( AUTH_USER
, UNAUTH_USER
, and AUTH_ERROR
) so that they could properly be consumed by the reducers
. 噢,天哪,我没有导出我的操作类型(
AUTH_USER
, UNAUTH_USER
和AUTH_ERROR
),以便reducers
可以正确使用它们。
// ./actions/authentication/index.js
export const AUTH_USER = 'auth_user';
export const UNAUTH_USER = 'unauth_user';
export const AUTH_ERROR = 'auth_error';
The missing export
caused the issue. 缺少
export
导致了此问题。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.