vue实现sso
Vue 实现 SSO（单点登录）方案
单点登录（SSO）允许用户通过一次登录访问多个相关系统。以下是基于 Vue 的实现方案：
使用 OAuth2/OpenID Connect 协议
OAuth2 是 SSO 的常用协议，OpenID Connect 在其基础上扩展了身份认证功能。
安装依赖：
npm install vue-oidc-client # 或使用 auth0-vue 等库配置 OIDC 客户端：
// main.js
import { createAuth0 } from '@auth0/auth0-vue';
const app = createApp(App)
app.use(
createAuth0({
domain: 'your-domain.auth0.com',
clientId: 'your_client_id',
authorizationParams: {
redirect_uri: window.location.origin
}
})
)登录按钮组件：
<template>
<button @click="login">Login</button>
</template>
<script>
import { useAuth0 } from '@auth0/auth0-vue';
export default {
setup() {
const { loginWithRedirect } = useAuth0();
return { login: loginWithRedirect };
}
}
</script>使用 JWT 和跨域认证
前端处理 JWT 令牌：
// 存储 token
localStorage.setItem('token', response.data.access_token);
// 请求拦截器
axios.interceptors.request.use(config => {
const token = localStorage.getItem('token');
if (token) config.headers.Authorization = `Bearer ${token}`;
return config;
});检查登录状态：
// 路由守卫
router.beforeEach((to, from, next) => {
const isAuthenticated = localStorage.getItem('token');
if (to.meta.requiresAuth && !isAuthenticated) {
next('/login');
} else {
next();
}
});使用 CAS 协议
重定向到 CAS 服务器：
window.location.href = 'https://cas-server.com/login?service='
+ encodeURIComponent(window.location.origin + '/callback');处理回调：
// 在回调页面
const ticket = new URLSearchParams(window.location.search).get('ticket');
if (ticket) {
axios.post('/api/validate', { ticket }).then(res => {
localStorage.setItem('token', res.data.token);
router.push('/');
});
}注意事项
- 所有敏感操作需在后端验证 token
- 使用 HTTPS 保证传输安全
- 设置 token 过期时间和刷新机制
- 考虑实现全局登出功能，清除所有系统的会话
后端配合要求
后端需要实现：
- Token 验证接口
- 用户信息获取接口
- 跨域支持（CORS）
- 会话管理
示例 Node.js 验证中间件：
function authenticate(req, res, next) {
const token = req.headers.authorization?.split(' ')[1];
if (!token) return res.status(401).send();
jwt.verify(token, 'secret_key', (err, user) => {
if (err) return res.status(403).send();
req.user = user;
next();
});
}以上方案可根据具体 SSO 提供商（如 Auth0、Okta、Keycloak 等）调整实现细节。
