vue 实现单点登录
单点登录（SSO）实现原理
单点登录允许用户通过一次身份验证访问多个系统。核心原理是用户首次登录后，认证中心颁发令牌（如Token），其他系统通过验证令牌实现免登录。
Vue中实现SSO的方案
基于OAuth2.0/OpenID Connect
使用标准化协议（如OAuth2.0）与认证服务器（如Keycloak、Auth0）交互：
-
安装
oidc-client库npm install oidc-client-js -
配置认证信息
// auth.js import { UserManager } from 'oidc-client';
const config = {
authority: 'https://sso.example.com',
client_id: 'vue-app',
redirect_uri: ${window.location.origin}/callback,
response_type: 'code',
scope: 'openid profile'
};
export const userManager = new UserManager(config);
3. 登录跳转
```javascript
// Login.vue
import { userManager } from './auth';
methods: {
login() {
userManager.signinRedirect();
}
}- 回调处理
// Callback.vue async mounted() { try { const user = await userManager.signinRedirectCallback(); localStorage.setItem('sso_token', user.access_token); this.$router.push('/'); } catch (error) { console.error('SSO回调失败:', error); } }
基于JWT的跨域方案
适用于自有认证体系的场景：
-
主域登录后设置Cookie
document.cookie = `sso_token=${token}; domain=.example.com; path=/`; -
子应用检查Token
// main.js axios.interceptors.request.use(config => { const token = localStorage.getItem('sso_token') || getCookie('sso_token'); if (token) config.headers.Authorization = `Bearer ${token}`; return config; }); -
Token验证端点
// 后端API需提供验证接口 /api/verify-token
基于CAS协议
传统企业级方案：
-
安装
vue-cas插件npm install vue-cas -
全局配置
import VueCas from 'vue-cas';
Vue.use(VueCas, { casUrl: 'https://cas.example.com', service: window.location.href });
3. 路由守卫验证
```javascript
router.beforeEach((to, from, next) => {
if (to.meta.requiresAuth && !Vue.$cas.isAuthenticated()) {
Vue.$cas.login();
} else {
next();
}
});关键注意事项
- 跨域处理：确保认证服务器配置CORS白名单
- Token安全：使用HttpOnly、Secure标记的Cookie存储敏感令牌
- 会话同步：通过postMessage或StorageEvent实现子应用间状态同步
- 注销处理：需实现全局登出逻辑
// 注销示例 userManager.signoutRedirect({ post_logout_redirect_uri: window.location.origin });
调试技巧
- 使用浏览器开发者工具检查网络请求和令牌传递
- 验证JWT内容可通过jwt.io
- 测试不同子域名下的Cookie共享情况
以上方案可根据实际技术栈选择实现，现代SSO推荐优先采用OAuth2.0/OpenID Connect标准协议。
