Reactjs react aad msal authProvider.getAccessToken()无限期地重新加载组件
我添加了一个axios拦截器,在该拦截器中调用authProvider.getAccessToken()来获取令牌并添加到每个请求的头中 这是我的axiosInterceptor.jsReactjs react aad msal authProvider.getAccessToken()无限期地重新加载组件,reactjs,azure-active-directory,react-aad-msal,Reactjs,Azure Active Directory,React Aad Msal,我添加了一个axios拦截器,在该拦截器中调用authProvider.getAccessToken()来获取令牌并添加到每个请求的头中 这是我的axiosInterceptor.js import axios from 'axios' import { authProvider } from '../authProvider' export const axiosApiIntance = axios.create() export const axiosInterceptor = axio
import axios from 'axios'
import { authProvider } from '../authProvider'
export const axiosApiIntance = axios.create()
export const axiosInterceptor = axiosApiIntance.interceptors.request.use(async request => {
try {
let token = await authProvider.getAccessToken()
request.headers['Authorization'] = `Bearer ${token.accessToken}`
return request
} catch (err) {
console.log(err)
}
}, error => {
return Promise.reject(error.message)
})
这是我的authProvider.js
import { LoginType, MsalAuthProvider } from 'react-aad-msal'
// The auth provider should be a singleton. Best practice is to only have it ever instantiated once.
// Avoid creating an instance inside the component it will be recreated on each render.
// If two providers are created on the same page it will cause authentication errors.
export const authProvider = new MsalAuthProvider(
{
auth: {
authority: process.env.REACT_APP_AUTHORITY,
clientId: process.env.REACT_APP_CLIENT_ID,
postLogoutRedirectUri: process.env.REACT_APP_URL,
redirectUri: process.env.REACT_APP_URL,
validateAuthority: true,
// After being redirected to the "redirectUri" page, should user
// be redirected back to the Url where their login originated from?
navigateToLoginRequestUrl: false
},
cache: {
cacheLocation: 'sessionStorage',
storeAuthStateInCookie: true
}
},
{
scopes: ['openid', 'profile', 'user.read']
},
{
loginType: LoginType.Redirect,
// When a token is refreshed it will be done by loading a page in an iframe.
// Rather than reloading the same page, we can point to an empty html file which will prevent
// site resources from being loaded twice.
tokenRefreshUri: window.location.origin + '/auth.html'
}
)
authProvider在App.js中使用
<AzureAD provider={authProvider} reduxStore={configureStore}>
....
</AzureAD>
....
App.js中还包括axiosInterceptor
请提供建议,说明可能导致部件重新加载的原因。
我已经删除了authProvider.getAccessToken()并验证了它是否可以正常工作。因此,重新加载是由此引起的。首先,我建议您验证AuthProvider的范围、权限和客户端ID 我在一个项目中遇到了类似的问题,我必须将作用域添加到getAccessToken()函数中,即使我在其他项目中从未这样做 见下文:
var authenticationParameters = {
scopes: ['openid', 'profile', 'user.read'],
};
axios.interceptors.request.use(function (config): any {
return new Promise(async (resolve: any, reject: any) => {
await authProvider.getAccessToken(authenticationParameters).then((response: any) => {
config.headers["Authorization"] = "Bearer " + response.accessToken;
config.headers["Content-Type"] = "application/json";
config.headers.Accept = "application/json";
resolve(config);
})
.catch((error: any) => {
console.log(error.message);
});
});
});
希望能有所帮助;)
问候