通过重定向将数据从 Express 发送到 React

Question

我有两个链接的应用程序：一个在端口 5000 上充当服务器（express），另一个在端口 3000 上充当客户端（React）。我想将数据从服务器发送到客户端 - 到特定页面.

流动：

1. 用户点击“登录” localhost:3000
2. 它们被重定向到一个外部站点，该站点返回一个代码并重定向到 localhost:5000/api/callback
3. router.get('/api/callback')根据代码获取授权令牌，然后重定向到localhost:3000/dashboard（通过 React Router 显示仪表板组件的位置）
4. 仪表板通过从服务器获取令牌来将令牌保存在其状态
5. 然后仪表板将调用服务器以获取基于令牌的其他数据

我意识到这很复杂，但这基本上是我遇到麻烦的地方；我不完全了解如何让 Express 和 React 正确通信。

在 server.js 中：

router.get('/callback', async (req, res) => {
    const code = req.query.code;
    const token = await getAuthorizationTokenFromExternalSite(code);

    // Poor attempt to persist data
    res.cookie('token', token);

    // Poor attempt to let the user see this URL
    res.redirect("http://localhost:3000/dashboard");
});

router.get('/dashboard', (req, res) => {
    res.send({ token: req.cookies['token'] });
});

客户端/src/App.js

class App extends Component {

    render() {
        return(
            <BrowserRouter>
                <div>
                    <Route exact path="/" component={LoginPage} />
                    <Route path="/dashboard" component={Dashboard} />
                </div>
            </BrowserRouter>
        );
    }

}

export default App;

客户端/src/Dashboard.js

class Dashboard extends Component {

    state = { token: null };

    componentDidMount() {
        fetch('/api/dashboard')
          .then(res => this.setState({ token: res.token }));
    }

    render() {
        return(
            <div>
                Tis the Dashboard, the token is {this.state.token}.
            </div>
        );
    }

}

export default Dashboard;

将用户localhost:3000从服务器带回，然后传递必要数据的正确方法是什么？

Answer 1

我认为将此令牌放在#<token here>将用户重定向到 UI 的 uri 位中的哈希中是很常见 的。#uri的片段不会发送到您重定向到的后端服务器，因此比将其放在后面要好一些?。然后您可以（在 ui 中）解析令牌并使用它来发出请求。通常通过传递 http 标头Authorization: Bearer ${token}。

如果仅使用 http（这意味着 UI 无法以编程方式访问它），并且后端知道查看 cookie 以获取令牌，则将其放入 cookie 中就可以了。从长远来看，这比仅通过 URL 将访问令牌传递给 UI 更复杂（在我看来）。

审查身份验证的流程/动态；万一它被证明是有帮助的：

• 用户点击页面
• 单击登录，并被重定向到登录提供程序 protal，或有一个弹出显示
• 用户输入数据并将其提交到后端，后端使用代码将它们重定向到目标平台。如果您尝试无服务器，通常您可以在此时直接向 UI 提供访问令牌。这是基于登录提供程序设置中的配置。
• 您的后端使用该代码请求访问/刷新令牌。
• 获得访问/刷新令牌后，您可以安全地保存它们，然后您可以选择：
  1. 将访问令牌直接移交给重定向中的 UI。因此 UI 可以直接向您授权的提供者发出请求。
  2. 生成您自己的令牌（例如 JWT）和刷新令牌，并将这些提供给 UI。如果 UI 需要来自提供者的数据，他们会使用您的令牌调用您的后端，并且您在内部管理对提供者的调用。

如果您有多个提供商可以合作，则选项 2 会更容易；例如 facebook & google & dropbox，并且您有一个服务器来管理令牌。这是更经典的做事方式。

选项 1 是无服务器的，只需重定向回您的应用程序并让 UI 执行任何必要的身份验证流程，管理 UI 代码中的令牌和事物。