Question

我使用omniauth-github策略，点击按钮后我想将一个动作发送到另一个域，（例如＆＃39; https://github.com/login/oauth/authorize＆＃39;）。然而，当使用调度时，这不起作用，因为浏览器预先请求我的请求并且拒绝使用“不允许 - 访问 - 控制 - 允许 - 来源”＃39;。我可以通过使用和指向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
    })
  }
}

Answer 1

您需要向此方法提供您的redux商店的dispatch方法才能生效，这通常通过使用mapDispatchToProps和redux的connect()方法来完成：{{3} }

这是典型的流程，如果由于某种原因你需要在安装你的React应用程序之前在组件之外调用它（但在你初始化你的redux存储之后）这样的东西可以工作：

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);

然后，您就可以在组件中使用this.props.loginGitHub()调用loginGitHub。

React Redux将操作分派给另一个域进行身份验证

1 个答案: