vue实现单点登录
单点登录（SSO）概念
单点登录是一种用户只需登录一次即可访问多个相互信任的应用系统的机制。在Vue中实现SSO通常需要结合后端认证服务（如OAuth2.0、JWT等）。
基于OAuth2.0的实现方案
1. 配置认证服务器
使用OAuth2.0协议（如Keycloak、Auth0或自建服务）作为SSO的核心。认证服务器负责颁发令牌（如Access Token、Refresh Token）。
2. 前端Vue集成
安装vue-oidc-client或oidc-client-js库，用于处理OAuth2.0流程：
npm install oidc-client3. 初始化OIDC客户端
在Vue项目中创建配置文件（如auth.js）：
import { UserManager } from 'oidc-client';
const config = {
authority: 'https://your-auth-server.com',
client_id: 'your-client-id',
redirect_uri: 'http://localhost:8080/callback',
response_type: 'code',
scope: 'openid profile'
};
export const userManager = new UserManager(config);4. 登录与回调处理
在登录页面触发登录：
userManager.signinRedirect();在回调页面（如Callback.vue）处理认证结果：
async mounted() {
try {
const user = await userManager.signinRedirectCallback();
localStorage.setItem('access_token', user.access_token);
this.$router.push('/dashboard');
} catch (error) {
console.error('SSO回调失败:', error);
}
}基于JWT的实现方案
1. 后端签发JWT
用户首次登录时，后端返回JWT令牌，前端存储（建议使用httpOnly的Cookie或localStorage）。
2. 前端验证令牌
在Vue的全局路由守卫中检查令牌有效性：
router.beforeEach((to, from, next) => {
const token = localStorage.getItem('access_token');
if (to.meta.requiresAuth && !token) {
next('/login');
} else {
next();
}
});3. 跨域资源共享（CORS）
确保后端API允许前端域名的跨域请求，并在请求头中携带令牌：
axios.interceptors.request.use(config => {
config.headers.Authorization = `Bearer ${localStorage.getItem('access_token')}`;
return config;
});安全注意事项
- 避免将敏感令牌存储在
localStorage中，优先使用httpOnly的Cookie。 - 实现令牌自动刷新逻辑，防止过期中断用户操作。
- 后端需验证令牌签名和有效期，防止伪造请求。
扩展方案：CAS协议
若企业使用CAS（Central Authentication Service），可通过vue-cas库集成。流程类似OAuth2.0，但需配置CAS服务器地址和服务票据校验端点。
以上方案需根据实际业务需求调整，例如结合Vuex管理全局认证状态或实现静默续签。
