LSSE-front/src/views/user/ThirdLogin.vue

<template>
  <div class="page-wrapper">
    <img src="~@/assets/images/user/bg.jpg" alt="" />
    <div class="login-wrapper">
      <img
        style="position: absolute; left: -10px; top: -8px; z-index: 1; width: 937px; height: 465px"
        src="~@/assets/images/user/bg-login.png"
        alt=""
      />
      <div class="btn-wrapper">
        <div v-if="controlPermission" class="btn" @click="openControlSystem">
          <img src="~@/assets/images/user/btn-login.png" alt="" />
          <span class="text">进入控制系统</span>
        </div>
        <div v-if="instructorPermission" class="btn" @click="openInstructorSystem">
          <img src="~@/assets/images/user/btn-login.png" alt="" />
          <span class="text">进入教员系统</span>
        </div>
        <div v-if="trainerPermission" class="btn" @click="openTrainerSystem">
          <img src="~@/assets/images/user/btn-login.png" alt="" />
          <span class="text">进入训练员系统</span>
        </div>
      </div>
    </div>
    <div v-if="userName" class="username">{{ userName }}，欢迎你！</div>
    <div class="close-btn" @click="handleQuit()">退出</div>
  </div>
</template>

<script>
import { Modal } from 'ant-design-vue'
import openThirdLogin from '@/utils/openThirdLogin'
import { ACCESS_TOKEN } from '@/store/mutation-types'
import storage from 'store'

export default {
  data() {
    return {
      userName: '',
      roleName: '',
    }
  },
  computed: {
    roleNameArr() {
      return this.roleName.split(',')
    },
    isAdmin() {
      return this.roleNameArr.includes('管理员')
    },
    isInstructor() {
      return !this.isAdmin && this.roleNameArr.includes('教员')
    },
    isTrainer() {
      return !this.isAdmin && !this.isInstructor && this.roleNameArr.includes('训练员')
    },
    controlPermission() {
      return this.isAdmin
    },
    instructorPermission() {
      return this.isAdmin || this.isInstructor
    },
    trainerPermission() {
      return this.isAdmin || this.isInstructor || this.isTrainer
    },
  },
  async created() {
    const searchParams = new URLSearchParams(window.location.search)
    const searchCode = searchParams.get('code')
    const localCode = window.localStorage.getItem('code')
    if (searchCode) {
      window.localStorage.setItem('code', searchCode)
      window.location.href = window.location.origin + window.location.pathname
    } else if (localCode) {
      try {
        const tokenRes = await this.$http({
          url: '/oauth2/thirdLogin',
          method: 'get',
          params: { code: localCode },
        })
        this.$store.commit('SET_TOKEN', '123')
        storage.set(ACCESS_TOKEN, tokenRes.data.token, 7 * 24 * 60 * 60 * 1000)
        this.$store.commit('SET_TOKEN', tokenRes.data.token)
        const res = await this.$http({
          url: '/auth/userInfo',
          method: 'get',
        })
        this.userName = res.data.nickName || res.data.userName
        this.roleName = res.data.roleName
      } catch (error) {
        console.log(error)
      } finally {
        window.localStorage.removeItem('code')
      }
    } else {
      try {
        const res = await this.$http({
          url: '/auth/userInfo',
          method: 'get',
        })
        this.userName = res.data.nickName || res.data.userName
        this.roleName = res.data.roleName
      } catch (error) {
        console.log(error)
      }
    }
  },
  methods: {
    openControlSystem() {
      this.$router.push({ name: 'SimulationSceneCentralControl' })
    },
    openInstructorSystem() {
      this.$router.push({ name: 'SimulationSceneInstructor' })
    },
    openTrainerSystem() {
      this.$router.push({ name: 'SimulationSceneTrainer' })
    },
    handleQuit() {
      if (process.env.NODE_ENV === 'development') {
        Modal.confirm({
          title: this.$t('layouts.usermenu.dialog.title'),
          content: this.$t('layouts.usermenu.dialog.content'),
          okText: '确定退出',
          cancelText: '取消',
          onOk: () => {
            return this.$store.dispatch('Logout').then(() => {
              this.$router.push({ name: 'login' })
            })
          },
          onCancel() {},
        })
      }
      if (process.env.NODE_ENV === 'production') {
        this.$store.dispatch('Logout').then(() => {
          openThirdLogin()
        })
      }
    },
  },
}
</script>

<style lang="less" scoped>
.page-wrapper {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.login-wrapper {
  position: relative;
  width: 917px;
  height: 445px;
}
.btn-wrapper {
  position: absolute;
  right: 32px;
  top: 220px;
  z-index: 2;
  transform: translateY(-50%);
}
.btn {
  width: 329px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  font-weight: bolder;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  position: relative;
}
.btn + .btn {
  margin-top: 16px;
}
.text {
  position: absolute;
  z-index: 10;
}
img {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.username {
  position: absolute;
  right: 130px;
  top: 40px;
  padding: 10px 20px;
  font-size: 20px;
  line-height: 1;
  color: #ffffff;
}
.close-btn {
  background-image: linear-gradient(0deg, #444444 0%, #848484 100%), linear-gradient(#13475d, #13475d);
  background-blend-mode: normal, normal;
  border: solid 1px #5f5f5f;

  position: absolute;
  right: 40px;
  top: 40px;
  padding: 10px 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #e81010;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
}
</style>