英文:
Sharing JWT between Cross-Port Applications using postMessage
问题
我在本地主机上有两个应用程序，分别在不同的端口上运行（localhost:3000和localhost:3002）。我的目标是在这两个应用程序之间传递一个JWT（JSON Web Token），并将用户从localhost:3000重定向到localhost:3002。然而，我当前使用的postMessage方法的实现并没有按预期工作。
这是我尝试过的方法：
发送方（localhost:3000）：
const targetWindow = window.open("http://localhost:3002", "_blank");
if (targetWindow) {
targetWindow.addEventListener("load", () => {
const jwtToken = "my_jwt_token";
targetWindow.postMessage({ jwtToken }, "http://localhost:3002");
});
}
接收方（localhost:3002）：
useEffect(() => {
window.addEventListener("message", (event) => {
if (event.origin === "http://localhost:3000") {
const { jwtToken } = event.data;
}
});
}, [])
然而，当我打印出"message"事件时，控制台中没有看到任何消息。你能帮我找出可能导致这个问题的原因吗？在不同端口上运行的这两个应用程序之间共享JWT的更好方法是什么？
非常感谢你的任何见解或指导。
英文:
I have two applications running on my localhost, each on a different port (localhost:3000 and localhost:3002). My goal is to redirect a user from localhost:3000 to localhost:3002 while passing a JWT (JSON Web Token) between the two applications. However, my current implementation using the postMessage method isn't working as expected.
Here's what I've tried:
Sender (localhost:3000):
const targetWindow = window.open("http://localhost:3002", "_blank");
if (targetWindow) {
targetWindow.addEventListener("load", () => {
const jwtToken = "my_jwt_token";
targetWindow.postMessage({ jwtToken }, "http://localhost:3002");
});
}
Receiver (localhost:3002):
useEffect(() => {
window.addEventListener("message", (event) => {
if (event.origin === "http://localhost:3000") {
const { jwtToken } = event.data;
}
});
}, [])
However, I'm not seeing any messages in the console when I print the "message" event. Could you please help me identify what might be causing this issue? Is there a better approach to achieving my goal of sharing a JWT between these two applications running on different ports?
Any insights or guidance would be greatly appreciated.
答案1
得分: 1
我使用universal-cookie通过cockles共享了jwt令牌。
发送方（localhost:3000）：
const jwtToken = 'your_jwt_token_here';
const cookies = new Cookies();
cookies.set('jwtToken', jwtToken, { path: '/' });
接收方（localhost:3002）：
const cookies = new Cookies();
const jwtToken = cookies.get('jwtToken')
注意：
提取jwt令牌后，请不要忘记清除cookies。
英文:
I shared the jwt token throw cockles using universal-cookie
Sender (localhost:3000):
const jwtToken = 'your_jwt_token_here';
const cookies = new Cookies();
cookies.set('jwtToken', jwtToken, { path: '/' });
Receiver (localhost:3002):
const cookies = new Cookies();
const jwtToken = cookies.get('jwtToken')
Note:
Dont forget to clean the cookies after extracting the jwtToken
答案2
得分: 0
JWT令牌是可以公开发布的，因此通常的做法是提供一个查询参数：localhost:3002?JWT=my-jwt-token，然后从中提取出来，并由localhost:3002的后端进行验证。
这是我能想到的最简单的解决方案，没有隐藏的不希望出现的副作用。
英文:
JWT tokens are safe to publish openly, so the pretty standard way to do it is to provide a query parameter: localhost:3002?JWT=my-jwt-token, which later is extracted from there and validated by whatever backends the localhost:3002.
This is the simplest solution I can imagine without hidden unwanted side effects.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论