Получите токен доступа в localStorage, созданный MSAL. JS, и поместите его в Axios. - PullRequest
Новая
       16

Получите токен доступа в localStorage, созданный MSAL. JS, и поместите его в Axios.

0 голосов
/ 31 марта 2020

Добрый день,

Я пытаюсь реализовать MSAL. js в своем приложении. По сути, я могу реализовать msal. js и войти в систему, используя мою электронную почту из AD. Я также настроил msal для сохранения моих tokenid и accessToken в моем localStorage

. accessToken работает в моем бэкэнде, потому что я тестировал его с помощью программного обеспечения Postman. Но в моем приложении я не знаю, как можно получить и поместить его в мой заголовок Axios, потому что key в localStorage выглядит так:

enter image description here

Где у него есть Key в localStorage объекта. 

{"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, например: 

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

Заранее спасибо.

1 Ответ

1 голос
/ 31 марта 2020

Если вы используете пакет msal в своем проекте, вы можете посетить этот образец из Github Repo MSAL Azure AD.

Взгляните на этого AuthProvider. js на линии 70

enter image description here По сути, вы можете поставить console.log(tokenResponse) после if(tokenResponse) заявление. Например: 

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

В журнале консоли вы увидите подробности ответа токена. Это сложно, но имя параметра accessToken, который вы ищете, idToken.rawIdToken, а не accessToken (потому что, насколько я знаю, токен доступа предназначен для токена запроса к графу ms).

Тогда вот вы можете установить элемент для вашего localStorage. 

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

Таким образом, вы сможете поместить его в заголовок вашего запроса. Как и в случае, используя axios

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

Примечание. Обязательно очищайте webApiAccessToken в localStorage всякий раз, когда пользователь щелкает метод выхода из системы. Для этого просто localStorage.removeItem("webApiAccessToken")

Надеюсь, это поможет вам.

...