我对实现的了解并不太远,并且它非常熊骨而不是重构(也不是很好的编码实践)。
这是一个管理门户,它使用公司的 Azure Active Directory 来验证用户,而不是用户名/密码等。流程是这样的:
- 用户导航到
/admin
。 useEffect()
开始检查用户是否isAuthenticated
。- 如果没有,它们会自动重定向到登录。
- 一旦他们登录或被验证为已经是
isAuthenticated
,他们现在就可以访问属于<AuthenticatedTemplate>
.
当前唯一的子组件是<Token>
,出于测试目的,它只是打印出从 API 返回的 JWT 令牌。基本上这里发生的是:
- ,
accessToken
,也会自动发送到我idToken
的oid
API 以在服务器端进行验证。 - 当它们被验证时,将根据数据库检查用户......如果它们存在,发送一个 JWT......如果不存在,添加它们并发送一个 JWT。
- JWT 被保存
sessionStorage
并随后用于客户端-API 通信。
我在 API 中遇到的问题是被查询四次或更多次:
这是我到目前为止所拥有的:
// index.tsx
import React from 'react';
import ReactDOM from 'react-dom';
import App from './components/App';
import { PublicClientApplication } from '@azure/msal-browser';
import { MsalProvider } from '@azure/msal-react';
import { msalConfig } from './utils/authConfig';
// Instantiate MSAL that encapsulates the entire app
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,
useMsal,
useAccount,
useIsAuthenticated,
} from '@azure/msal-react';
import { graphConfig, loginRequest } from '../utils/authConfig';
import { InteractionStatus } from '@azure/msal-browser';
import axios from 'axios';
const Token = (props: any) => {
if (props.account) {
props.instance
.acquireTokenSilent({
...loginRequest,
account: props.account,
})
.then((response: any) => {
axios
.post('/api/v2/auth/aad_token/validate/', {
access_token: response.accessToken,
id_token: response.idToken,
oid: response.uniqueId,
})
.then((response) => {
console.log(response.data);
})
.catch((error) => {
console.log(error);
});
});
}
return <div>Test</div>;
};
const App = () => {
const isAuthenticated = useIsAuthenticated();
const { instance, inProgress, accounts } = useMsal();
const account = useAccount(accounts[0] || {});
useEffect(() => {
if (inProgress === InteractionStatus.None && !isAuthenticated) {
instance.loginRedirect(loginRequest);
}
});
return (
<div className='App'>
<AuthenticatedTemplate>
<Token account={account} instance={instance} />
</AuthenticatedTemplate>
</div>
);
};
export default App;
关于如何限制这一点的建议?