获取MSAL.JS生成的localStorage中的access token，放入axios中

Question

美好的一天，

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

中

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

它在 object 的 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'

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

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

提前致谢。

Answer 1

如果您在项目中使用 msal 包，您可以从 MSAL Azure AD 的 Github Repo 访问这个 samples。

上查看此 AuthProvider.js

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

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

在您的控制台日志中，您将看到令牌响应的详细信息。这很棘手，但是您正在寻找的 accessToken 的参数名称是 idToken.rawIdToken 而不是 accessToken （因为据我所知，访问令牌是针对 ms 的请求令牌图）。

然后这里是你可以设置一个项目到你的localStorage。

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

因此您可以根据您的要求提供它 header。就像你这样，使用 axios

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

注意：确保在用户单击注销方法时清除 localStorage 中的 webApiAccessToken。为此，只需 localStorage.removeItem("webApiAccessToken")

希望对你有所帮助

Get the access token in localStorage generated by MSAL.JS and put it in Axios