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="!isTrainer" class="btn" @click="click">
          <img src="~@/assets/images/user/btn-login.png" alt="" />
          <span class="text">进入控制系统</span>
        </div>
        <div class="btn" @click="click">
          <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 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.isInstructor && this.roleNameArr.includes('训练员')
    },
  },
  async created() {
    const searchParams = new URLSearchParams(window.location.search)
    const searchLogged = searchParams.get('logged')
    const localLogged = window.localStorage.getItem('logged')
    if (searchLogged) {
      window.localStorage.setItem('logged', searchLogged)
      window.location.href = window.location.origin + window.location.pathname
      return
    } else if (localLogged) {
      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)
      } finally {
        window.localStorage.removeItem('logged')
      }
      return
    }
    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 {
      openThirdLogin()
    }
  },
  methods: {
    click() {
      if (this.roleName === '管理员') {
      }
      if (this.roleName === '教员') {
      }
      if (this.roleName === '训练员') {
      }
    },
    handleQuit () {
      console.log(process.env)
    },
  },
}
</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>