React Redux отправляет действие в другой домен для аутентификации - PullRequest
Новая
       7

React Redux отправляет действие в другой домен для аутентификации

0 голосов
/ 18 мая 2018

Я использую стратегию omniauth-github, и после нажатия кнопки я хочу отправить действие в другой домен (например, https://github.com/login/oauth/authorize').. При использовании диспетчеризации это не работает, так как браузер предварительно отображает мойзапрос и резонанс с «Нет» Access-Control-Allow-Origin. Я могу заставить это работать, используя и указав на URL, который затем отправит пользователя обратно в мой бэкэнд для аутентификации пользователя получить токен сохранить егоНо без отправки я должен отправить токен JWT, который мой сайт генерирует в параметрах запроса, и, поскольку я опускаю создателей и редукторов действий, я не могу сохранить его в localStorage. Есть ли способ выполнить кросс-домен диспетчеризации? 

export const loginGitHub = () => {
  return dispatch => {
    fetch('https://github.com/login/oauth/authorize?client_id=...&scope=user',{
      method: 'GET',
      headers: {
        'Access-Control-Allow-Origin': '*',
      },
      mode: 'cors'
    })
    .then(resp=>resp.json())
    .then(data => {
      debugger
    })
  }
}

1 Ответ

0 голосов
/ 19 мая 2018

Вы должны будете предоставить метод dispatch вашего магазина притока для этого метода, чтобы он работал, как правило, это делается с помощью mapDispatchToProps с методом connect() в приставке: https://github.com/reduxjs/react-redux/blob/master/docs/api.md

Этотипичный процесс, если по какой-то причине вам нужно вызвать его вне компонента, как до того, как вы смонтируете свое приложение React (но после того, как вы инициализировали свое хранилище редуксов), может сработать что-то вроде этого: 

import { createStore } from 'redux'

const store = createStore();

export const loginGitHub = dispatch => {
  return dispatch => {
    fetch('https://github.com/login/oauth/authorize?client_id=...&scope=user',{
      method: 'GET',
      headers: {
        'Access-Control-Allow-Origin': '*',
      },
      mode: 'cors'
    })
    .then(resp=>resp.json())
    .then(data => {
      debugger
    })
  }
}

loginGitHub(store.dispatch);

Этоочень анти-паттерн, и я бы рекомендовал правильно использовать mapDispatchToProps, для чего требуется

Создание магазина Оборачивание вашего приложения у провайдера и предоставление ранее созданного магазина в качестве опоры для провайдера.Используя connect() как в вашем компоненте: 

import React, { Component } from 'react';
import { connect } from 'redux';

import { loginGitHub } from './wherever';

class ExampleComponent extends Component {
  // whatever component methods you need
}

const mapDispatchToProps = dispatch => ({
  loginGitHub: () => dispatch(logInGitHub())
})

export default connect(null, mapDispatchToProps)(ExampleComponent);

Тогда вы сможете вызывать loginGitHub с this.props.loginGitHub() в вашем компоненте.

...