vue单点登录实现
Vue 单点登录实现方案
单点登录（SSO）允许用户通过一次登录访问多个关联系统。以下是基于 Vue 的实现方案：
使用 OAuth2.0/OpenID Connect 协议
OAuth2.0 是常见的 SSO 实现标准，适合 Vue 作为前端框架与后端配合的场景。
安装 axios 用于网络请求：
npm install axios创建 auth.js 封装认证逻辑：
import axios from 'axios';
const authClient = axios.create({
baseURL: 'https://sso-server.com'
});
export const login = () => {
window.location.href = 'https://sso-server.com/oauth/authorize?response_type=code&client_id=vue-client&redirect_uri=' + encodeURIComponent(window.location.origin + '/callback');
};
export const handleCallback = async (code) => {
const { data } = await authClient.post('/oauth/token', {
grant_type: 'authorization_code',
code,
redirect_uri: window.location.origin + '/callback'
});
localStorage.setItem('access_token', data.access_token);
};前端路由守卫验证
在 Vue router 中配置全局前置守卫：
router.beforeEach((to, from, next) => {
if (to.matched.some(record => record.meta.requiresAuth)) {
if (!localStorage.getItem('access_token')) {
login();
} else {
next();
}
} else {
next();
}
});Token 刷新机制
实现 token 自动刷新避免频繁登录：
export const refreshToken = async () => {
try {
const { data } = await authClient.post('/oauth/token', {
grant_type: 'refresh_token',
refresh_token: localStorage.getItem('refresh_token')
});
localStorage.setItem('access_token', data.access_token);
return true;
} catch (error) {
return false;
}
};跨域处理
在 vue.config.js 中配置代理：
module.exports = {
devServer: {
proxy: {
'/api': {
target: 'https://sso-server.com',
changeOrigin: true
}
}
}
};安全注意事项
- 使用 HTTPS 确保传输安全
- 将 token 存储在内存而非 localStorage 提高安全性
- 实现 CSRF 防护机制
- 设置合理的 token 过期时间
与后端配合要点
- 确保后端正确配置 CORS
- 统一认证中心的 session 管理
- 各子系统共享相同的 cookie 域名或采用 token 传递方案
这种实现方式适用于中大型系统，小型系统可采用更简单的 JWT 方案。具体选择应根据项目规模和安全性要求决定。
