英文:
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 共享了 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.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论