QuickLogin.vue 3.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143
  1. <template>
  2. <div class="quick-login-container">
  3. <div class="loading-overlay">
  4. <div class="loading-content">
  5. <el-loading-spinner class="loading-spinner"></el-loading-spinner>
  6. <p class="loading-text">登录中...</p>
  7. </div>
  8. </div>
  9. </div>
  10. </template>
  11. <script setup>
  12. import { onMounted } from 'vue'
  13. import { useRouter } from 'vue-router'
  14. import { getTenantIdByName, login } from '@/api/login/login.js'
  15. import { ElLoading, ElMessage } from 'element-plus'
  16. const router = useRouter()
  17. let loading = null
  18. // 测试账号信息
  19. const testAccount = {
  20. tenantName: '人工智能通识课平台',
  21. username: 'zdxyz',
  22. password: 'zdxyz'
  23. }
  24. // 获取租户 ID
  25. const getTenantId = async (tenantName) => {
  26. try {
  27. const res = await getTenantIdByName(tenantName)
  28. if (res && res.data) {
  29. return res.data
  30. } else {
  31. ElMessage.error('租户验证失败!')
  32. return null
  33. }
  34. } catch (error) {
  35. ElMessage.error('获取租户信息失败!')
  36. console.error('获取租户 ID 错误:', error)
  37. return null
  38. }
  39. }
  40. // 自动登录函数
  41. const autoLogin = async () => {
  42. try {
  43. // 显示全局加载状态
  44. loading = ElLoading.service({
  45. lock: true,
  46. text: '登录中...',
  47. background: 'rgba(0, 0, 0, 0.7)'
  48. })
  49. // 获取租户ID
  50. const tenantId = await getTenantId(testAccount.tenantName)
  51. if (!tenantId) {
  52. // 租户验证失败
  53. return
  54. }
  55. // 执行登录
  56. const res = await login(
  57. { 'Tenant-Id': tenantId },
  58. testAccount
  59. )
  60. if (res && res.code === 0) {
  61. // 登录成功,保存登录状态
  62. localStorage.setItem('isLoggedIn', 'true')
  63. localStorage.setItem('token', res.data.accessToken)
  64. localStorage.setItem('userName', testAccount.username)
  65. localStorage.setItem('tenantName', testAccount.tenantName)
  66. localStorage.setItem('password', testAccount.password)
  67. localStorage.setItem('rememberMe', 'true')
  68. //课程权限
  69. localStorage.setItem('courseDataScope', res.data.courseDataScope)
  70. localStorage.setItem('blocklyDataScope', res.data.blocklyDataScope)
  71. ElMessage.success('信息校验成功')
  72. // 跳转到课程界面
  73. router.push('/ai-general-course')
  74. } else {
  75. ElMessage.error(res?.message || '信息校验失败')
  76. // 如果登录失败,跳转到正常登录页面
  77. router.push('/login')
  78. }
  79. } catch (error) {
  80. ElMessage.error('信息校验过程中发生错误')
  81. console.error('信息校验错误:', error)
  82. // 错误时跳转到登录页面
  83. router.push('/login')
  84. } finally {
  85. // 关闭加载状态
  86. if (loading) {
  87. loading.close()
  88. }
  89. }
  90. }
  91. // 组件挂载时立即执行自动登录
  92. onMounted(() => {
  93. autoLogin()
  94. })
  95. </script>
  96. <style scoped>
  97. .quick-login-container {
  98. position: fixed;
  99. top: 0;
  100. left: 0;
  101. right: 0;
  102. bottom: 0;
  103. display: flex;
  104. justify-content: center;
  105. align-items: center;
  106. background: linear-gradient(to bottom, #001169, #8a78d0);
  107. }
  108. .loading-overlay {
  109. display: flex;
  110. justify-content: center;
  111. align-items: center;
  112. width: 100%;
  113. height: 100%;
  114. }
  115. .loading-content {
  116. text-align: center;
  117. color: white;
  118. }
  119. .loading-spinner {
  120. width: 60px;
  121. height: 60px;
  122. margin-bottom: 20px;
  123. }
  124. .loading-text {
  125. font-size: 18px;
  126. font-weight: 500;
  127. }
  128. </style>