Smart-SSO实战踩坑记：我的Vue项目接入单点登录，从403到成功的完整配置

Smart-SSO实战避坑指南：Vue项目单点登录集成全解析

最近在Vue项目中集成Smart-SSO时，我经历了从403错误到最终成功的完整历程。这篇文章将分享那些官方文档没有详细说明的关键配置点，以及如何避免常见的"坑"。

1. 环境准备与基础配置

在开始集成之前，有几个关键点需要特别注意：

• 服务端版本匹配：确保使用的Smart-SSO服务端版本支持H5模式，最低要求v2.3.0+
• 前端框架选择：虽然官方示例使用jQuery，但在Vue项目中我们可以更优雅地实现
• 开发环境配置：本地测试需要配置hosts文件，添加服务端域名解析

后端基础配置中，最容易遗漏的是h5-enabled开关：

# application.yml关键配置 smart: sso: server-url: http://your-sso-server.com client-id: your_client_id client-secret: your_client_secret exclude-urls: /auth/* h5-enabled: true # 必须显式设置为true

注意：很多开发者遇到的第一个问题就是忘记开启h5-enabled，导致前端始终无法获取token

2. 跨域问题深度解决

前后端分离架构下，跨域是必须解决的问题。Smart-SSO的跨域配置有几个特殊要求：

1. CorsFilter的Order值：必须小于ClientContainer的Order值（默认为10）
2. Header特殊处理：需要允许X-Requested-With头
3. 预检请求处理：OPTIONS请求需要特殊处理

正确的跨域过滤器实现：

@Order(5) // 必须小于10 @WebFilter @Configuration public class CorsFilter implements Filter { @Override public void doFilter(ServletRequest req, ServletResponse res, FilterChain chain) throws IOException, ServletException { HttpServletResponse response = (HttpServletResponse) res; response.setHeader("Access-Control-Allow-Origin", "*"); response.setHeader("Access-Control-Allow-Methods", "*"); response.setHeader("Access-Control-Max-Age", "3600"); response.setHeader("Access-Control-Allow-Headers", "Content-Type, "+TOKEN_NAME_PREFIX+CLIENT_ID+", X-Requested-With"); if ("OPTIONS".equalsIgnoreCase(((HttpServletRequest) req).getMethod())) { response.setStatus(HttpServletResponse.SC_OK); return; } chain.doFilter(req, res); } }

3. Vue前端集成最佳实践

在Vue项目中，我们需要实现以下几个核心功能：

• 登录跳转逻辑：处理认证中心的重定向
• Token管理：安全存储和刷新token
• 请求拦截：自动携带token和刷新逻辑

推荐使用axios拦截器实现：

// src/utils/auth.js const TOKEN_KEY = 'smart-sso-token'; const CLIENT_ID = 'your_client_id'; export function setupAxiosInterceptors(axiosInstance) { // 请求拦截器 axiosInstance.interceptors.request.use(config => { const token = localStorage.getItem(`${TOKEN_KEY}-${CLIENT_ID}`); if (token) { config.headers[`${TOKEN_KEY}-${CLIENT_ID}`] = token; config.headers['X-Requested-With'] = 'XMLHttpRequest'; } return config; }); // 响应拦截器 axiosInstance.interceptors.response.use( response => { if (response.data.code === 15) { // token过期 return refreshToken().then(() => { return axiosInstance(response.config); }); } return response; }, error => { if (error.response.status === 403) { redirectToLogin(); } return Promise.reject(error); } ); } async function refreshToken() { const refreshToken = localStorage.getItem(`${TOKEN_KEY}-refresh-${CLIENT_ID}`); const { data } = await axios.get('/auth/refresh-token', { params: { refreshToken } }); localStorage.setItem(`${TOKEN_KEY}-${CLIENT_ID}`, data.accessToken); localStorage.setItem(`${TOKEN_KEY}-refresh-${CLIENT_ID}`, data.refreshToken); }

4. Nginx部署配置要点

生产环境部署时，Nginx配置有几个关键点：

1. 代理设置：确保正确代理前端和后端请求
2. 静态资源缓存：合理配置缓存策略
3. 跨域支持：虽然前端已经处理，但Nginx也可以提供额外支持

典型配置示例：

server { listen 80; server_name your-frontend.com; location / { root /path/to/dist; try_files $uri $uri/ /index.html; expires 1h; } location /api/ { proxy_pass http://backend:8080; proxy_set_header Host $host; proxy_set_header X-Real-IP $remote_addr; proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; } location /auth/ { proxy_pass http://backend:8080; # 特殊处理OPTIONS请求 if ($request_method = OPTIONS) { add_header Access-Control-Allow-Origin "*"; add_header Access-Control-Allow-Methods "GET, POST, OPTIONS"; add_header Access-Control-Allow-Headers "Content-Type,Authorization,X-Requested-With"; return 204; } } }

5. 常见问题排查指南

在实际集成过程中，我遇到了以下典型问题及解决方案：

6. 安全增强建议

在完成基础集成后，可以考虑以下安全增强措施：

• HTTPS强制：所有通信必须使用HTTPS
• Token安全存储：考虑使用更安全的存储方式
• 定期刷新：实现静默自动刷新机制
• 权限验证：前端路由守卫集成权限检查

Vue路由守卫示例：

// src/router.js router.beforeEach((to, from, next) => { if (to.meta.requiresAuth && !isAuthenticated()) { next({ path: '/login', query: { redirect: to.fullPath } }); } else { next(); } }); function isAuthenticated() { const token = localStorage.getItem('smart-sso-token-your_client_id'); if (!token) return false; // 可以添加额外的token有效性检查 return true; }

在项目实际上线后，我们发现最常出现的问题是token刷新时机的把握。经过多次调试，最终采用了"提前刷新"策略：在token过期前5分钟就自动发起刷新请求，这样用户体验最为流畅。