英文:
How to maintain the IdToken after page reload in MSAL React App?
问题
以下是翻译好的内容：
我正在React应用中使用MSAL。在登录后，我使用以下代码获取详细信息-```jsxconst [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来访问令牌：```javascriptinstance.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?
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论