亲爱的 React 开发人员。
当您想使用新的加载器功能时,有人可以解释或展示在当前最新版本 6.4.1 中将 MSAL 与 React Router 结合使用的最佳方法吗?
基于您可以在此处阅读的新加载器功能:
“每个路由都可以定义一个“加载器”函数,以便在渲染之前向路由元素提供数据。”
https://reactrouter.com/en/main/route/loader
问题出现在我身上,因为我在这里缺乏想象力...我记得访问 msal 实例的唯一方法是使用 MSAL 库在 MsalProvider 内的组件上提供的 Hook 。但是,新的加载器功能依赖于一个普通函数,我不能在其中使用 Hook 或访问任何应用程序状态。
我们非常欢迎任何帮助。 提前致谢。
为了在下面提供一些背景信息,我分享了一些我的应用程序代码。
在我的 UserEditScreen.tsx 中:
// UserEditScreen component definition
....
// loader definition outside UserEditScreen component
export const loader = ({ request, params }: LoaderFunctionArgs) => {
...
// some more code to clarify my need on the msal instance inside the loader
const request = {
account: msalInstance.getActiveAccount(),
scopes: scopes
}
const accessToken = await msalInstance.acquireTokenSilent(request)
.then(response => response.accessToken)
.catch(error => {
console.error(error);
})
// then with the accessToken I can just use made
// a javascript fetch request to my secured endpoint in azure
...
}
在我的 app.tsx 中
type AppProps = {
msalInstance: PublicClientApplication;
}
const router = createBrowserRouter(createRoutesFromElements(
<Route path="/" errorElement={<GlobalError />}>
...
<Route path="/administration" element={
<AuthenticatedScreen>
<AdministrationScreen />
</AuthenticatedScreen>
}>
<Route path='users' element={<UsersScreen />} />
<Route path='users/new' element={<UserNewScreen />} />
<Route path='users/:id/edit'
element={<UserEditScreen />}
loader={userLoader}
errorElement={<UserEditError />}
/>
</Route>
...
</Route>
));
function App({ msalInstance }: AppProps) {
return (
<MsalProvider instance={msalInstance}>
<RouterProvider router={router} />
</MsalProvider>
);
}
export default App;
在我的 index.tsx 中
const msalInstance = new PublicClientApplication(msalConfig);
const accounts = msalInstance.getAllAccounts();
if (accounts.length > 0) {
msalInstance.setActiveAccount(accounts[0]);
}
msalInstance.addEventCallback((event: EventMessage) => {
if (event.eventType === EventType.LOGIN_SUCCESS && event.payload) {
const payload = event.payload as AuthenticationResult;
const account = payload.account;
msalInstance.setActiveAccount(account);
}
});
const root = ReactDOM.createRoot(
document.getElementById('root') as HTMLElement
);
root.render(
<React.StrictMode>
<App msalInstance={msalInstance} />
</React.StrictMode>
);
最佳答案
无需创建路由器组件,您可以将其转换为一个函数,该函数将 msalInstance
作为参数以在范围内关闭它并返回配置的路由器。
例子:
应用
type AppProps = {
msalInstance: PublicClientApplication;
}
interface CreateRouter {
msalInstance: PublicClientApplication;
}
const createRouter = ({ msalInstance }: CreateRouter) => createBrowserRouter(
createRoutesFromElements(
<Route path="/" errorElement={<GlobalError />}>
...
<Route path="/administration" element={
<AuthenticatedScreen>
<AdministrationScreen />
</AuthenticatedScreen>
}>
<Route path='users' element={<UsersScreen />} />
<Route path='users/new' element={<UserNewScreen />} />
<Route path='users/:id/edit'
element={<UserEditScreen />}
loader={userLoader(msalInstance)}
errorElement={<UserEditError />}
/>
</Route>
...
</Route>
)
);
...
function App({ msalInstance }: AppProps) {
return (
<MsalProvider instance={msalInstance}>
<RouterProvider router={createRouter({ msalInstance })} />
</MsalProvider>
);
}
export default App;
用户编辑界面
同样,loader
函数可以更新为一个柯里化(Currying)函数,该函数将 msalInstance
对象作为参数,并返回加载器函数msalInstance
对象在范围内关闭。
// loader definition outside UserEditScreen component
export const loader = (msalInstance: PublicClientApplication) =>
({ request, params }: LoaderFunctionArgs) => {
...
// some more code to clarify my need on the msal instance inside the loader
const request = {
account: msalInstance.getActiveAccount(),
scopes: scopes
}
const accessToken = await msalInstance.acquireTokenSilent(request)
.then(response => response.accessToken)
.catch(error => {
console.error(error);
})
// then with the accessToken I can just use made
// a javascript fetch request to my secured endpoint in azure
...
};
关于reactjs - React + MSAL + React Router 6.4.1(最新版)加载器特性问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/73872479/