告别重复登录：vue-admin-template集成CAS与OAuth2.0实现单点登录

你是否还在为多个系统间频繁切换登录而烦恼？管理员每天平均需要登录8个不同系统，重复输入账号密码不仅降低工作效率，还存在密码管理风险。本文将详解如何在vue-admin-template中集成CAS（Central Authentication Service，中央认证服务）与OAuth2.0两种主流单点登录（Single Sign-On，SSO）方案，只需一次认证即可畅行所有关联系统。读完本文你将获得：两种SSO方案的完整实现步骤、关键代码解析、常见问题解决方案，以及可直接复用的配置模板。

单点登录原理与项目适配分析

单点登录（SSO）通过共享认证凭证实现多系统间无缝访问。vue-admin-template默认采用基于Token的认证机制，其登录流程涉及三个核心文件：

• 登录状态管理：src/store/modules/user.js 维护token状态及登录/登出动作
• 路由权限控制：src/permission.js 实现路由拦截与权限校验
• 请求拦截处理：src/utils/request.js 管理HTTP请求头中的token传递

现有架构已具备SSO集成基础，但需改造以下环节：

1. 登录入口：将本地登录表单替换为SSO认证跳转
2. Token管理：适配SSO服务返回的认证凭证格式
3. 会话维持：处理SSO服务的票据验证与续期

CAS集成方案：企业级统一认证实现

CAS是一种广泛应用于企业环境的SSO协议，采用票据（Ticket）交换机制。实现步骤如下：

1. 引入CAS客户端依赖

npm install cas-authentication --save

2. 改造登录流程

修改src/store/modules/user.js的login action，替换本地登录为CAS重定向：

// CAS认证入口
actions: {
  casLogin({ commit }) {
    // 构造CAS服务端登录URL
    const casServerUrl = 'https://sso.example.com/cas/login'
    const serviceUrl = encodeURIComponent(window.location.origin + '/cas-callback')
    window.location.href = `${casServerUrl}?service=${serviceUrl}`
  },
  // 处理CAS回调
  handleCasCallback({ commit }, ticket) {
    return new Promise((resolve, reject) => {
      // 验证票据并获取用户信息
      service.post('/api/cas/validate', { ticket }).then(response => {
        const { token, name, avatar } = response.data
        commit('SET_TOKEN', token)
        commit('SET_NAME', name)
        commit('SET_AVATAR', avatar)
        setToken(token)
        resolve()
      }).catch(error => {
        reject(error)
      })
    })
  }
}

3. 添加CAS回调路由

在src/router/index.js中添加回调处理路由：

{
  path: '/cas-callback',
  component: () => import('@/views/login/cas-callback'),
  hidden: true
}

4. 路由拦截适配

修改src/permission.js的路由守卫，检测CAS票据：

router.beforeEach(async(to, from, next) => {
  NProgress.start()
  document.title = getPageTitle(to.meta.title)
  const hasToken = getToken()

  if (hasToken) {
    // 已登录逻辑保持不变
  } else {
    // 检测URL中的CAS票据参数
    const ticket = to.query.ticket
    if (ticket) {
      // 处理CAS票据验证
      await store.dispatch('user/handleCasCallback', ticket)
      next(to.path)
    } else if (whiteList.indexOf(to.path) !== -1) {
      next()
    } else {
      // 重定向到CAS登录页
      store.dispatch('user/casLogin')
      NProgress.done()
    }
  }
})

OAuth2.0集成方案：第三方授权登录实现

OAuth2.0适用于对接微信、GitHub等第三方平台登录，通过授权码模式实现认证。以GitHub授权为例：

1. 配置OAuth2.0客户端

在src/settings.js中添加OAuth2配置：

module.exports = {
  title: 'Vue Admin Template',
  // OAuth2.0配置
  oauth2: {
    clientId: 'your-github-client-id',
    clientSecret: 'your-github-client-secret',
    authorizeUrl: 'https://github.com/login/oauth/authorize',
    tokenUrl: 'https://github.com/login/oauth/access_token',
    userInfoUrl: 'https://api.github.com/user'
  }
}

2. 实现OAuth2登录流程

在src/store/modules/user.js中添加OAuth2相关actions：

actions: {
  // 发起OAuth2授权请求
  oauth2Login({ commit }) {
    const { clientId, authorizeUrl } = require('@/settings').oauth2
    const redirectUri = encodeURIComponent(window.location.origin + '/oauth2-callback')
    window.location.href = `${authorizeUrl}?client_id=${clientId}&redirect_uri=${redirectUri}&scope=user`
  },
  
  // 处理授权回调
  async handleOauth2Callback({ commit }, { code }) {
    const { clientId, clientSecret, tokenUrl, userInfoUrl } = require('@/settings').oauth2
    
    // 1. 获取访问令牌
    const tokenResponse = await service.post(tokenUrl, {
      client_id: clientId,
      client_secret: clientSecret,
      code,
      grant_type: 'authorization_code'
    })
    
    // 2. 获取用户信息
    const userResponse = await service.get(userInfoUrl, {
      headers: { Authorization: `token ${tokenResponse.data.access_token}` }
    })
    
    // 3. 保存用户状态
    commit('SET_TOKEN', tokenResponse.data.access_token)
    commit('SET_NAME', userResponse.data.name)
    commit('SET_AVATAR', userResponse.data.avatar_url)
    setToken(tokenResponse.data.access_token)
  }
}

3. 请求拦截器适配

修改src/utils/request.js的请求拦截器，支持OAuth2 Token：

service.interceptors.request.use(
  config => {
    if (store.getters.token) {
      // 根据Token前缀判断认证类型
      if (store.getters.token.startsWith('cas-')) {
        config.headers['X-CAS-Token'] = getToken()
      } else {
        config.headers['Authorization'] = `Bearer ${getToken()}`
      }
    }
    return config
  },
  error => {
    return Promise.reject(error)
  }
)

两种方案对比与选择建议

特性	CAS方案	OAuth2.0方案
适用场景	企业内部系统	第三方平台对接
安全性	高（票据加密传输）	中（需HTTPS保障）
实现复杂度	较高（需部署CAS服务）	较低（利用现有平台）
定制化程度	高（自主管理用户体系）	低（依赖第三方用户信息）
典型应用	企业内网管理系统	开放平台、社区网站

决策指南：企业内部系统优先选择CAS，需对接外部平台时采用OAuth2.0。对于混合场景，可在登录页提供两种选项，通过src/views/login/index.vue实现切换入口。

常见问题解决方案

Token过期自动刷新

修改src/utils/request.js的响应拦截器：

service.interceptors.response.use(
  response => { /* 成功处理保持不变 */ },
  async error => {
    const originalRequest = error.config
    // 处理401未授权错误且未尝试刷新Token
    if (error.response.status === 401 && !originalRequest._retry) {
      originalRequest._retry = true
      try {
        // 调用刷新Token接口或重定向到SSO服务
        await store.dispatch('user/refreshToken')
        return service(originalRequest)
      } catch (err) {
        // 刷新失败，重定向到登录页
        await store.dispatch('user/resetToken')
        window.location.href = '/login'
        return Promise.reject(err)
      }
    }
    return Promise.reject(error)
  }
)

登出同步处理

完善src/store/modules/user.js的logout action：

logout({ commit, state }) {
  return new Promise((resolve, reject) => {
    // 1. 清除本地Token
    removeToken()
    resetRouter()
    commit('RESET_STATE')
    
    // 2. 通知SSO服务登出（CAS示例）
    if (state.token.startsWith('cas-')) {
      const logoutUrl = `https://sso.example.com/cas/logout?service=${window.location.origin}`
      window.location.href = logoutUrl
    } else {
      resolve()
    }
  })
}

总结与扩展建议

本文实现了vue-admin-template的两种单点登录方案，核心改造点包括：登录流程重定向、认证凭证管理、路由权限适配。实际应用中需注意：

1. 安全加固：所有SSO通信必须使用HTTPS，敏感配置项应通过环境变量注入
2. 用户体验：可在src/views/login/index.vue添加加载状态和错误提示
3. 扩展功能：结合src/utils/auth.js实现Remember Me功能，延长认证有效期

建议优先在测试环境验证SSO集成效果，逐步迁移生产环境。下期将介绍如何基于本文方案实现多租户SSO隔离，敬请关注。如需完整代码示例，可查看项目的sso-integration分支。