cbjsxt-front-master/src/views/login/ssoLogin.vue

<template>
  <div class="login-container">
    <div class="login-content">
      <div class="login-title">正在登录中...</div>
      <div class="loading-spinner">
        <i class="el-icon-loading"></i>
      </div>
      <div class="login-status">{{ statusText }}</div>
    </div>
  </div>
</template>

<script>
  import { ssoLoginByCode } from '@/api/user'
  import store from '@/store'
  import router from '@/router'

  export default {
    name: 'SsoLogin',
    data() {
      return {
        statusText: '正在解析登录参数...',
      }
    },
    mounted() {
      this.handleSSOLogin()
    },
    methods: {
      getUrlParam(key) {
        var query = window.location.search.substring(1)
        var vars = query.split('&')
        for (var i = 0; i < vars.length; i++) {
          var pair = vars[i].split('=')
          if (pair[0] == key) {
            return pair[1]
          }
        }
        return false
      },
      async handleSSOLogin() {
        try {
          // 1. 获取URL中的code参数
          const code = this.getUrlParam('code')
          if (!code) {
            this.statusText = '未获取到登录参数，请重试'
            setTimeout(() => {
              router.replace('/login')
            }, 2000)
            return
          }

          this.statusText = '正在验证登录信息...'

          // 2. 调用后端接口，将code传给后端
          const res = await ssoLoginByCode({
            code,
          })
          if (res.token) {
            this.statusText = '登录成功，正在跳转...'
            // 使用authentication统一处理用户信息
            await store.dispatch('user/authentication', res)
            // 5. 登录成功后跳转到首页或重定向页面
            const redirect = this.getUrlParam('redirect') || '/'
            router.replace(redirect)
          } else if (!res.state) {
            this.statusText = res.message || '单点登录失败'
            setTimeout(() => {
              router.replace('/login')
            }, 2000)
            return
          }
        } catch (error) {
          console.error('单点登录失败:', error)
          this.statusText = '登录失败'

          // 登录失败后重定向到登录页
          setTimeout(() => {
            router.replace('/login')
          }, 2000)
        }
      },
    },
  }
</script>

<style lang="scss" scoped>
  .login-container {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #f0f2f5;
  }

  .login-content {
    background: #fff;
    padding: 40px;
    border-radius: 8px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
    text-align: center;
    min-width: 360px;
  }

  .login-title {
    font-size: 20px;
    font-weight: 500;
    color: #303133;
    margin-bottom: 30px;
  }

  .loading-spinner {
    margin: 20px 0;
  }

  .loading-spinner i {
    font-size: 48px;
    color: #409eff;
    animation: rotate 1.5s linear infinite;
  }

  .login-status {
    font-size: 14px;
    color: #606266;
    margin-top: 20px;
  }

  @keyframes rotate {
    from {
      transform: rotate(0deg);
    }
    to {
      transform: rotate(360deg);
    }
  }
</style>