Reactjs SPA混合反应路由器和OAuth快速路由器（API调用）

我试着用React路由器和github oauth做一个React应用程序

但Github Oauth不支持cors api调用，并且在前端存储密钥也不安全

因此，我计划在Express中托管我的react应用程序，并使用Express进行后端github oauth调用

然后，我发现当Express Router与React Router混合时，Express Router将无法工作，可能被React Router阻塞

快速代码如下：

const express = require('express')
const randomstring = require('randomstring');
const axios = require('axios');
const app = express()

let state = '';

app.get('/authorize', function (req, res) {
  state = randomstring.generate();
  res.redirect('http://github.com/login/oauth/authorize?' + 'client_id=3ba48xxxx6d6d0&state=' + state);
})

app.get('/auth-callback', function (req, res) {
  if (state === req.params.state) {
    axios.post('https://github.com/login/oauth/access_token', {
      client_id: '3ba48xxxx6d6d',
      client_secret: 'xxxx',
      code: req.params.code
    }).then(function (data) {
      console.log(data);
    });
  };
});

app.use(express.static('build'))

app.get('*', function(req, res) {
    res.sendfile('./build/index.html');
});

app.listen(3000, function () {
  console.log('Example app listening on port 3000!')
})

这可能和这个有关，我认为这是相同的想法

因此，当我将登录按钮链接到“/authorize”时，express并没有截获它

登录按钮

import React from 'react';
import { Redirect } from 'react-router-dom'
import authService from '../GithubAuth/AuthService.js';

class Login extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      redirectToReferrer: false
    };
  }
  state = {
    redirectToReferrer: false
  }

  login = () => {
    authService.authenticate(() => {
      this.setState({ redirectToReferrer: true })
    })
  }

  render() {
    const { from } = this.props.location.state || { from: { pathname: '/' } }
    const { redirectToReferrer } = this.state

    if (redirectToReferrer) {
      return (
        <Redirect to={from} />
      )
    }

    return (
      <div>
        <p>You must log in to view the page at {from.pathname}</p>
        <button onClick={this.login}>Log in</button>
      </div>
    )
  }
}

export default Login;

---

一些专家能解释一下原因并告诉我如何正确使用吗？

你能在你呼叫/授权的地方发布页面的URL吗？@VivekN post。

import * as Cookies from "js-cookie";

export default {
  isAuthenticated: false,
  authenticate(cb) {
    const githubToken = Cookies.get('github_token');
    if (githubToken) {
      this.isAuthenticated = true
    } else {
      global.location.href = '/authorize';
    }
    setTimeout(cb, 100) // fake async
  },
  signout(cb) {
    this.isAuthenticated = false
    setTimeout(cb, 100)
  }
}