auth.vue 2.7 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697
  1. <template>
  2. <div class="hc-body-loading" v-loading="loading" element-loading-text="授权登录中...">
  3. <div class="error-page" v-if="isErrorShow">
  4. <div class="img" :style="`background-image: url(${svg403});`"/>
  5. <div class="content">
  6. <h1>403</h1>
  7. <div class="desc">抱歉,token授权登录异常,请重新进入</div>
  8. <div class="actions">
  9. <el-button type="primary" block @click="toLoginTap" size="large">手动登录</el-button>
  10. </div>
  11. </div>
  12. </div>
  13. </div>
  14. </template>
  15. <script setup>
  16. import {ref, onMounted} from "vue";
  17. import {useAppStore} from "~src/store";
  18. import {useAppLogin} from "~sto/user";
  19. import userApi from "~api/userInfo";
  20. import {useRouter, useRoute} from 'vue-router'
  21. import svg403 from '~src/assets/view/403.svg';
  22. //初始变量
  23. const router = useRouter()
  24. const useRoutes = useRoute()
  25. const useAppState = useAppStore()
  26. //变量
  27. const loading = ref(true)
  28. const isErrorShow = ref(false)
  29. //渲染完成
  30. onMounted(() => {
  31. // 域名后加 /#/auth?token=xxxxxxx
  32. const { token } = useRoutes?.query;
  33. console.log(token)
  34. if (token) {
  35. isErrorShow.value = false
  36. useAppState.setTokenVal(token)
  37. queryCurrentUserData();
  38. } else {
  39. loading.value = false
  40. isErrorShow.value = true
  41. }
  42. })
  43. //获取用户信息
  44. const queryCurrentUserData = async () => {
  45. const { error, code, data } = await userApi.queryCurrentUserData();
  46. if (!error && code === 200) {
  47. await useAppLoginApi({
  48. tenantId: "000000",
  49. username: data.account,
  50. password: data.plaintextPassword,
  51. type: "account"
  52. })
  53. } else {
  54. window.$message?.error('授权信息异常')
  55. isErrorShow.value = true
  56. loading.value = false
  57. }
  58. }
  59. //请求授权登录
  60. const useAppLoginApi = async (form) => {
  61. loading.value = true;
  62. useAppLogin(form).then(() => {
  63. loading.value = false
  64. isErrorShow.value = false
  65. window?.$message?.success('授权登录成功');
  66. // router.push({path: '/home/index'});
  67. router.push({path: '/using/stats'});//跳转到档案统计页面
  68. setTimeout(() => {
  69. window?.location?.reload() //刷新页面
  70. }, 1000);
  71. }).catch(() => {
  72. window.$message?.error('授权登录失败')
  73. isErrorShow.value = true
  74. loading.value = false
  75. })
  76. }
  77. //跳转登陆
  78. const toLoginTap = () => {
  79. router.push({path: '/login'});
  80. }
  81. </script>
  82. <style lang="scss" scoped>
  83. @import "../../styles/error/style.scss";
  84. .hc-body-loading {
  85. position: relative;
  86. height: 100%;
  87. width: 100%;
  88. }
  89. </style>