vue实现sso
Vue 实现 SSO（单点登录）
使用 OAuth2.0/OpenID Connect 协议
在 Vue 项目中集成 SSO，通常采用 OAuth2.0 或 OpenID Connect 协议。以下是实现步骤：
安装依赖库（如 oidc-client-js 或 vue-oidc-client）：
npm install oidc-client配置认证客户端：
import { UserManager } from 'oidc-client';
const config = {
authority: 'https://your-sso-provider.com',
client_id: 'your-client-id',
redirect_uri: 'http://localhost:8080/callback',
response_type: 'code',
scope: 'openid profile email',
};
const userManager = new UserManager(config);登录跳转：
userManager.signinRedirect();处理回调：
userManager.signinRedirectCallback().then(user => {
console.log('Logged in user:', user);
});使用 JWT 和 Vuex 管理状态
在 Vuex 中存储用户认证状态：
const store = new Vuex.Store({
state: {
user: null,
token: null,
},
mutations: {
setUser(state, payload) {
state.user = payload.user;
state.token = payload.token;
},
},
});路由守卫验证：
router.beforeEach((to, from, next) => {
if (to.matched.some(record => record.meta.requiresAuth)) {
if (!store.state.token) {
next('/login');
} else {
next();
}
} else {
next();
}
});后端会话验证
前端需要定期验证 token 有效性：
setInterval(() => {
axios.get('/api/validate-token').catch(() => {
userManager.signinRedirect();
});
}, 300000);跨域处理
配置 axios 全局拦截器携带 token：
axios.interceptors.request.use(config => {
if (store.state.token) {
config.headers.Authorization = `Bearer ${store.state.token}`;
}
return config;
});退出登录实现
清除本地状态并调用 SSO 退出端点：
userManager.signoutRedirect();注意事项
- 确保所有子应用使用相同的 SSO 配置
- 生产环境必须使用 HTTPS
- 敏感操作需要重新验证
- 考虑实现 silent renew 自动刷新 token
以上方案适用于大多数基于标准的 SSO 服务（如 Keycloak、Auth0、Azure AD 等）。具体实现需根据实际 SSO 提供商文档调整参数和流程。
