0

MERN スタック構造と Redux を使用していますが、isomorphic-fetch モジュールに問題があります。

セッションからユーザー情報を取得したいのですが、isomorphic-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 をロードしてアクションをディスパッチすると、user.router.js の「req.user」が「undefined」を返します。

何が間違っているか推測してください。とても役に立ちます。

4

2 に答える 2

0

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)));
  };
}
于 2016-06-21T12:35:52.377 に答える
0

私は問題を理解しました。「isomorphic-fetch」はリクエスト Cookie を設定していなかったため、Cookie からセッションを取得できませんでした。以下のように action.js のコードを変更しましたが、完全に機能しています。

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

于 2016-06-20T13:08:21.493 に答える