react实现单点登录
实现单点登录（SSO）的核心逻辑
单点登录的核心是让用户在多个系统中只需登录一次。React应用通常需要与身份提供商（如OAuth2.0/OpenID Connect服务）交互，以下是典型实现方式：
使用OAuth2.0/OpenID Connect协议
安装必要的库：
npm install oidc-client-js axios创建认证服务模块：
import { UserManager, WebStorageStateStore } from 'oidc-client';
const config = {
authority: 'https://your-identity-provider.com',
client_id: 'your-react-app-client-id',
redirect_uri: `${window.location.origin}/callback`,
response_type: 'code',
scope: 'openid profile email',
post_logout_redirect_uri: window.location.origin,
userStore: new WebStorageStateStore({ store: window.localStorage })
};
const userManager = new UserManager(config);登录流程处理
在React组件中触发登录：
const handleLogin = () => {
userManager.signinRedirect();
};
// 回调页面处理
userManager.signinRedirectCallback().then(user => {
localStorage.setItem('access_token', user.access_token);
window.history.replaceState({}, document.title, window.location.pathname);
});令牌验证与API请求
创建axios拦截器处理令牌：
axios.interceptors.request.use(config => {
const token = localStorage.getItem('access_token');
if (token) {
config.headers.Authorization = `Bearer ${token}`;
}
return config;
});跨域资源共享（CORS）配置
确保后端服务配置了正确的CORS头：
Access-Control-Allow-Origin: https://your-react-app.com
Access-Control-Allow-Credentials: true
Access-Control-Allow-Headers: Authorization静默令牌刷新
实现自动令牌刷新：
userManager.startSilentRenew();
userManager.events.addAccessTokenExpired(() => {
userManager.signinSilent();
});退出登录处理
实现全局退出：
const handleLogout = () => {
userManager.signoutRedirect();
};安全注意事项
- 始终使用HTTPS协议
- 将令牌存储在内存而非localStorage（针对高安全要求场景）
- 实现PKCE扩展防止授权码拦截攻击
- 设置适当的token过期时间
与后端服务的集成
后端需要实现以下端点：
- 令牌验证端点
- 用户信息端点
- 令牌刷新端点
典型Node.js中间件示例：
const jwt = require('express-jwt');
app.use(jwt({
secret: 'your-secret',
algorithms: ['HS256'],
credentialsRequired: false
}));调试技巧
启用oidc-client的日志：
import { Log } from 'oidc-client';
Log.logger = console;
Log.level = Log.DEBUG;通过以上步骤，React应用可以实现完整的单点登录流程。实际部署时需根据具体身份提供商（如Auth0、Okta、Azure AD等）的文档调整配置参数。
