在MSAL React路由器中保存登录状态可以通过以下步骤实现:
AuthProvider.js
的文件,并导入必要的依赖项:import React, { createContext, useContext, useEffect, useState } from 'react';
import { PublicClientApplication } from '@azure/msal-browser';
const msalConfig = {
auth: {
clientId: 'YOUR_CLIENT_ID',
authority: 'YOUR_AUTHORITY',
redirectUri: 'YOUR_REDIRECT_URI',
},
};
const msalInstance = new PublicClientApplication(msalConfig);
const AuthContext = createContext();
export const useAuth = () => useContext(AuthContext);
export const AuthProvider = ({ children }) => {
const [account, setAccount] = useState(null);
useEffect(() => {
const accounts = msalInstance.getAllAccounts();
if (accounts.length > 0) {
setAccount(accounts[0]);
}
}, []);
const login = async () => {
const loginResponse = await msalInstance.loginPopup();
setAccount(loginResponse.account);
};
const logout = () => {
msalInstance.logout();
setAccount(null);
};
return (
<AuthContext.Provider value={{ account, login, logout }}>
{children}
</AuthContext.Provider>
);
};
AuthProvider
包裹你的路由器组件,以便在整个应用程序中共享登录状态:import React from 'react';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
import { AuthProvider } from './AuthProvider';
import Home from './Home';
import Profile from './Profile';
const App = () => {
return (
<AuthProvider>
<Router>
<Switch>
<Route exact path="/" component={Home} />
<Route exact path="/profile" component={Profile} />
</Switch>
</Router>
</AuthProvider>
);
};
export default App;
useAuth
钩子来访问登录状态和登录/注销功能:import React from 'react';
import { useAuth } from './AuthProvider';
const Home = () => {
const { account, login, logout } = useAuth();
return (
<div>
{account ? (
<div>
<h1>Welcome, {account.name}!</h1>
<button onClick={logout}>Logout</button>
</div>
) : (
<div>
<h1>Please login</h1>
<button onClick={login}>Login</button>
</div>
)}
</div>
);
};
export default Home;
这样,当用户访问你的应用程序时,如果他们已经登录,将显示欢迎消息和注销按钮。否则,将显示登录按钮。
请注意,上述代码中的YOUR_CLIENT_ID
,YOUR_AUTHORITY
和YOUR_REDIRECT_URI
应该替换为你自己的Azure AD应用程序的相关信息。
推荐的腾讯云相关产品:腾讯云身份认证服务(CAM)可以帮助你管理用户身份和访问权限,以确保应用程序的安全性。你可以在腾讯云的官方文档中了解更多关于CAM的信息:腾讯云身份认证服务(CAM)
领取专属 10元无门槛券
手把手带您无忧上云