javascript - 获取MSAL.JS生成的localStorage中的访问 token 并将其放入axios中

Question

美好的一天，

我正在尝试在我的应用程序中实现 MSAL.js。基本上，我能够实现 msal.js 并使用 AD 中的电子邮件登录。我还配置了 msal 以将我的 tokenid 和 accessToken 保存在我的 localStorage

accessToken 正在我的后端工作，因为我使用 Postman 软件对其进行了测试。但在我的应用程序中，我不知道如何获取并将其放入我的 Axios header 中，因为 localStorage 中的 key 显示如下:

它在对象的 localStorage 中有一个Key。

{"authority":"https://login.microsoftonline.com/TENANTID/","clientId":"CLIENT_ID","scopes":"CLIENT_ID","homeAccountIdentifier":"SOME_HASH"}

值为:

accessToken: 'TOKEN_HASH_HERE'
idToken: 'TOKEN_HASH_HERE'
expiresIn: 'TOKEN_HASH_HERE'
homeAccountIdentifier: 'TOKEN_HASH_HERE'

我需要获取访问 token 才能将其放入我的 axios header 中，如下所示:

axios.defaults.headers.common['Authorization'] = `Bearer ${accessTokenFromMsal}`

提前谢谢您。

Answer 1

如果您在项目中使用 msal 包，您可以访问此 samples来自 MSAL Azure AD 的 Github 存储库。

看看 line 70 上的这个 AuthProvider.js

基本上，您可以在 if(tokenResponse) 语句之后放置 console.log(tokenResponse) 。像这样:

if(tokenResponse){
    console.log(tokenResponse)
}

在控制台日志中，您将看到 token 响应的详细信息。这很棘手，但您正在查找的 accessToken 的参数名称是 idToken.rawIdToken 而不是 accessToken (因为据我所知，访问 token 用于向 ms 图发送请求 token )。

然后您可以在本地存储中设置一个项目。

if (tokenResponse) {
localStorage.setItem("webApiAccessToken", tokenResponse.idToken.rawIdToken)
...
}

因此您可以将其放在请求 header 中。就像您的情况一样，使用 axios

axios.defaults.headers.common['Authorization'] = `Bearer ${localStorage.getItem('webApiAccessToken')}`

注意:每当用户单击注销方法时，请务必清除 localStorage 中的 webApiAccessToken。为此，只需 localStorage.removeItem("webApiAccessToken")

希望对你有帮助。