通过重定向将数据从 Express 发送到 React
Posted
技术标签:
【中文标题】通过重定向将数据从 Express 发送到 React【英文标题】:Sending data from Express to React through a redirect 【发布时间】:2018-09-11 03:25:47 【问题描述】:我有两个链接的应用程序:一个在端口 5000 上充当服务器(express),另一个在端口 3000 上充当客户端(React)。我想将数据从服务器发送到客户端--一个特定的页面。
流程:
-
用户点击
localhost:3000
上的“登录”
它们被重定向到返回代码并重定向到localhost:5000/api/callback
的外部站点
router.get('/api/callback')
根据代码获取授权令牌,然后重定向到 localhost:3000/dashboard
(其中 Dashboard 组件通过 React Router 显示)
仪表板通过从服务器抓取令牌将令牌保存在其状态
然后仪表板将调用服务器以获取基于令牌的其他数据
我意识到这很令人费解,但这基本上就是我遇到麻烦的地方;我不完全了解如何使 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'] );
);
client/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;
client/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
,然后传递必要数据的正确方法是什么?
【问题讨论】:
【参考方案1】:我认为在将用户重定向到 UI 的 uri 的 #<token here>
位中将此令牌放入哈希中是很常见的。 uri 的#
段不会发送到您重定向到的后端服务器,因此比将其放在?
后面要好一些。然后您可以(在 ui 中)解析出令牌并使用它来发出请求。通常通过传递http头Authorization: Bearer $token
。
如果它只是 http 的(这意味着 UI 不能以编程方式访问它),将它放入 cookie 中是可以的,并且后端知道查看 cookie 以获取令牌。这比仅通过 URL 将访问令牌传递给 UI 更复杂(在我看来)。
审查身份验证的流程/动态;如果它有帮助:
用户点击页面 点击登录,并重定向到登录提供程序 protal,或弹出显示 用户输入数据并将其提交到后端,后端使用代码将他们重定向到目标平台。如果您尝试无服务器,通常可以在此时直接向 UI 提供访问令牌。这基于登录提供程序设置中的配置。 您的后端使用代码请求访问/刷新令牌。 获得访问/刷新令牌后,您可以安全地保存它们,然后您可以选择:-
在重定向中将访问令牌直接交给 UI。因此,用户界面可以直接向您授权的提供商提出请求。
生成您自己的令牌(例如 JWT)和刷新令牌,并将这些令牌提供给 UI。如果 UI 需要来自提供者的数据,他们会使用您的令牌调用您的后端,而您在内部管理对提供者的调用。
如果您有多个提供商可以合作,选项 2 会更容易;例如facebook & google & Dropbox,并且你有一个服务器来管理令牌。这是更经典的做事方式。
选项 1 是无服务器的,只需重定向回您的应用并让 UI 执行任何必要的身份验证流程,管理 UI 代码中的令牌和事物。
【讨论】:
内容丰富,谢谢。我使用了哈希,但由于我不希望用户在地址栏中实际看到令牌,所以我使用window.history.replaceState
来摆脱它。这被认为是 hacky 还是正常的(或者哈希通常只是被忽略)?
@idlackage 将其从 url 中剥离出来,这几乎是 afaik 要做的事情。我认为 replaceState 调用是公平的,只要你可以指望它跨浏览器。
另外,@idlackage 如果您想为返回的用户保留状态,您可以将令牌填充到 localstorage 或其他东西中。如果你走那条路,记得在存储和 url 中检查它:P 我总是第一次搞砸状态逻辑
嗨@idlackage 我发现你的问题非常相关,我陷入了类似的情况,如果你已经在github上推送了代码,请提供链接以上是关于通过重定向将数据从 Express 发送到 React的主要内容,如果未能解决你的问题,请参考以下文章
将 Express.js 4 的 res.status(401) 链接到重定向
如何从 express 重定向到 react-router?
使用 Express.js 和 NodeJS,您可以在响应正文中通过重定向发送 JSON