我正在使用mern堆栈结构和redux,我对同构法模块有问题。
我想从会话中获取用户信息,但是Insomorphic-fetch模块似乎与用户会话分开。
以下是视图派遣一个操作以获取会话的用户信息。
mainview.jsx:
import React, { PropTypes } from 'react';
import { connect } from 'react-redux';
import * as Actions from '../../redux/actions/actions';
class MainView extends React.Component {
constructor(props) {
super(props);
this.displayName = 'MainView';
}
componentWillMount() {
if (this.props.showMessageModal.message !== '') {
this.props.dispatch(Actions.showMessageModal());
}
this.props.dispatch(Actions.fetchUserSession());
}
render() {
const renderTemp = () => {
if (this.props.user) {
return <div>{ JSON.stringify(this.props.user) }</div>;
}
};
return (
<div>
MainView
{ renderTemp() }
</div>
);
}
}
MainView.contextTypes = {
router: React.PropTypes.object,
};
function mapStateToProps(store) {
return {
showMessageModal: store.showMessageModal,
user: store.user,
};
}
MainView.propTypes = {
showMessageModal: PropTypes.object.isRequired,
dispatch: PropTypes.func.isRequired,
user: PropTypes.object,
};
export default connect(mapStateToProps)(MainView);
跟踪是动作,还原和路由器。
actions.js(仅相关代码):
import * as ActionTypes from '../constants/constants';
import Config from '../../../server/config';
import fetch from 'isomorphic-fetch';
const baseURL = typeof window === 'undefined' ? process.env.BASE_URL || (`http://localhost:${Config.port}`) : '';
export function getUserSession(user) {
return {
type: ActionTypes.GET_USER_SESSION,
user,
};
}
export function fetchUserSession() {
return (dispatch) => {
return fetch(`${baseURL}/api/session-user`)
.then((response) => response.json())
.then((response) => dispatch(getUserSession(response.user)));
};
}
reducer_user.js(在索引还原器中合并):
import * as ActionTypes from '../constants/constants';
export const user = (state = null, action) => {
switch (action.type) {
case ActionTypes.GET_USER_SESSION :
return action.user;
default:
return state;
}
};
user.router.js(API路由器):
import { Router } from 'express';
router.get('/api/session-user', (req, res) => {
console.log('req.user: ' + req.user);
res.json(req.user);
});
export default router;
登录后,直接在浏览器上转到'/api/session-user'时,我可以看到这样的用户信息。
浏览器上的用户信息
但是,当我加载mainview并派遣操作时,'req.user'在user.router.js中返回"未定义"。
请猜猜怎么了。这将非常有帮助。
我已经弄清楚了这个问题。" Insomorphic-fetch"没有设置请求cookie,因此无法从cookie获得会话。我已更改了我的代码。
export function fetchUserSession() {
return (dispatch) => {
return $.ajax({
url: `${baseURL}/api/session-user`,
success: (response) => {
dispatch(getUserSession(response));
},
});
};
我参考了此页面-https://github.com/matthew-andrews/isomorphic-fetch/issues/75
您只需要添加credentials
参数:
export function fetchUserSession() {
return (dispatch) => {
return fetch(`${baseURL}/api/session-user`, {credentials: 'same-origin'})
.then((response) => response.json())
.then((response) => dispatch(getUserSession(response.user)));
};
}