我正在尝试调整 sample project为了我的需要。
我的需求基本上是:
我有第 1 步。按预期工作。但是,在他们登录后,它似乎正在尝试再次重新路由,我得到:
interaction_in_progress: Interaction is currently in progress. Please ensure that this interaction has been completed before calling an interactive API. For more visit: aka.ms/msaljs/browser-errors
70 |
71 | useEffect(() => {
72 | if (!isAuthenticated) {
> 73 | msalInstance.loginRedirect(loginRequest);
| ^ 74 | }
75 | })
76 |
无论是否存在 !isAuthenticated
,它都会这样做。有条件的。useIsAuthenticated
的用法来自 this documentation并且似乎评估为 false
即使用户已经登录。这是我迄今为止所拥有的:
import { Configuration, RedirectRequest } from '@azure/msal-browser';
// Config object to be passed to Msal on creation
export const msalConfig: Configuration = {
auth: {
clientId: '<client_id>',
authority: 'https://login.microsoftonline.com/<tenant_id>',
},
};
// Add here scopes for id token to be used at MS Identity Platform endpoints.
export const loginRequest: RedirectRequest = {
scopes: ['User.Read'],
};
// Add here the endpoints for MS Graph API services you would like to use.
export const graphConfig = {
graphMeEndpoint: 'https://graph.microsoft.com/v1.0/me',
};
// index.tsx
import React from 'react';
import ReactDOM from 'react-dom';
import App from './components/App';
import { PublicClientApplication } from '@azure/msal-browser';
import { msalConfig } from './components/authConfig';
import { MsalProvider } from '@azure/msal-react';
const msalInstance = new PublicClientApplication(msalConfig);
ReactDOM.render(
<React.StrictMode>
<MsalProvider instance={msalInstance}>
<App />
</MsalProvider>
</React.StrictMode>,
document.getElementById('root')
);
// App.tsx
import React, { useEffect } from 'react';
import {
AuthenticatedTemplate,
UnauthenticatedTemplate,
useMsal,
useIsAuthenticated,
} from '@azure/msal-react';
import { loginRequest } from './authConfig';
const App = () => {
const isAuthenticated = useIsAuthenticated();
const { instance } = useMsal();
console.log(isAuthenticated);
useEffect(() => {
if (!isAuthenticated) {
instance.loginRedirect(loginRequest);
}
});
return (
<div className='App'>
<AuthenticatedTemplate>
<div>Signed in...</div>
</AuthenticatedTemplate>
<UnauthenticatedTemplate>
<div>Signing in...</div>
</UnauthenticatedTemplate>
</div>
);
};
export default App;
有关如何解决此问题的建议?
最佳答案
好的,我能够在一些帮助下解决这个问题:
const App = () => {
const isAuthenticated = useIsAuthenticated();
const { instance, inProgress } = useMsal();
if (inProgress === InteractionStatus.None && !isAuthenticated) {
instance.loginRedirect(loginRequest);
}
return (
<div className='App'>
<AuthenticatedTemplate>
<div>Signed in...</div>
</AuthenticatedTemplate>
<UnauthenticatedTemplate>
<div>Signing in...</div>
</UnauthenticatedTemplate>
</div>
);
};
export default App;
关于reactjs - 仅当未通过 @azure/msal-react 进行身份验证时才重定向 onLoad,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/66714416/