英文:
How to maintain the IdToken after page reload in MSAL React App?
问题
以下是翻译好的内容：
我正在React应用中使用MSAL。在登录后，我使用以下代码获取详细信息-
```jsx
const [userDetails, setUserDetails] = useState(null);
useEffect(() => {
instance
.handleRedirectPromise()
.then(() => {
const currentUser = instance.getAllAccounts()[0];
setUserDetails(currentUser);
})
.catch((error) => console.log(error));
}, []);
在首次加载时，我将这些详细信息存储在userDetails常量中-
{
"homeAccountId": "XX-X553252fedd35",
"environment": "login.XX.net",
"tenantId": "XX-63c7-XX-91c6-553252fedd35",
"username": "X@XX.XX.com",
"localAccountId": "XX-7e21-4730-XX-XX",
"name": "XX XX",
"idToken": "xcasdcasdf3adsfa4sdafsd43fadsf43asdfxx"
"idTokenClaims": {
XXXX: XXXX
}
}
重新加载之前-
但是当我重新加载页面时，userDetails中的IdToken消失了。
并且在控制台中，我在重新加载后收到以下日志消息-
@azure/msal-common@12.0.0 : Info - CacheManager:getIdToken - No token found
重新加载后-
我正在使用以下npm包-
"azure/msal-browser": "^2.34.0",
"azure/msal-react": "^1.5.4",
我需要获得idToken以进行JWT身份验证。
<details>
<summary>英文:</summary>
I am using MSAL in React App. After the sign-in, I am getting the details using this code-
const [userDetails, setUserDetails] = useState(null);
useEffect(() => {
instance
.handleRedirectPromise()
.then(() => {
const currentUser = instance.getAllAccounts()[0];
setUserDetails(currentUser);
})
.catch((error) => console.log(error));
}, []);
In the first load, I am getting these details in the const userDetails-
{
"homeAccountId": "XX-X553252fedd35",
"environment": "login.XX.net",
"tenantId": "XX-63c7-XX-91c6-553252fedd35",
"username": "X@XX.XX.com",
"localAccountId": "XX-7e21-4730-XX-XX",
"name": "XX XX",
"idToken": "xcasdcasdf3adsfa4sdafsd43fadsf43asdfxx"
"idTokenClaims": {
XXXX: XXXX
}
}
#### Before Reload-
[ScreenShot](https://i.stack.imgur.com/1yyth.png)
But when I reload the page, the IdToken got missing from this userDetails const.
And in the console, I got this log message after reloading-
@azure/msal-common@12.0.0 : Info - CacheManager:getIdToken - No token found
#### After Reload-
[ScreenShot](https://i.stack.imgur.com/ge5Ul.png)
I am using these npm packages-
"@azure/msal-browser": "^2.34.0",
"@azure/msal-react": "^1.5.4",
I need to have the idToken for JWT authentication.
</details>
# 答案1
**得分**: 0
你可以通过调用acquireTokenSilent来访问令牌：
```javascript
instance.acquireTokenSilent(tokenRequest)
.then((response) => {
// 处理成功获取新令牌的情况
// ...
console.log(response);
})
.catch((error) => {
// 处理令牌获取过程中出现的任何错误
// ...
});
tokenRequest示例：
const tokenRequest = {
scopes: ["openid"],
};
英文:
You can access the token by calling acquireTokenSilent:
instance.acquireTokenSilent(tokenRequest)
.then((response) => {
// Handle the successful acquisition of a new token
// ...
console.log(response);
})
.catch((error) => {
// Handle any errors that occur during token acquisition
// ...
});
tokenRequest example:
const tokenRequest = {
scopes: ["openid"],
};
答案2
得分: -1
为什么不将令牌保存在本地存储中？这样，即使在刷新页面后也可以保留它。
英文:
Why do not you save the token in localStorage. So, you can preserve it even on refresh?
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论