soc_app/src/views/tokenlogin.vue

<template>
  <div class="login">
    <div>
      <div class="avatar-box">
        <van-loading text-color="#0094ff" v-if="loading">正在跳转</van-loading>
        <span style="color: red" v-if="type == 'error'">{{ message }}</span>
        <span style="color: #E6A23C" v-if="type == 'warn'">{{ message }}</span>
      </div>
    </div>
  </div>
</template>

<script>
// 请求接口
import { tokenLogin } from '@/api/public.js'
import { mapGetters } from 'vuex'
export default {
  data() {
    return {
      loading: false,
      type: '',
      message: ''
    }
  },
  computed: {
    ...mapGetters(['userName'])
  },
  inject:["initWebSocket"],
  mounted() {
    this.loading = true
    let { query } = this.$route;
    if (!query) {
      this.loading = false
      this.type = 'error'
      this.message = '缺少sso_token'
    } else {
      let { sso_token } = query
      if (!sso_token) {
        this.type = 'warn'
        this.loading = false
        this.message = '缺少sso_token'
      } else {
        tokenLogin(sso_token)
          .then(res => {
            console.log(res, 'res')
            sessionStorage.setItem('access_token',res.data.access_token);
            this.$router.replace('/home');
            //初始化websocket
            // this.initWebSocket();
          })
          .catch(e => {
            this.type = 'error'
            this.message = '请求错误'
            this.loading = false
          })
      }
    }
  },
  methods: {}
}
</script>

<style lang="scss">
//.van-cell__title{
//  align-items: center;
//}
//.custom-title{
//  align-self: center;
//}
</style>
<style scoped lang="scss">
.login {
  height: 100vh;
  background: url('../assets/img/login-background.png') top left no-repeat #edfcff;
  background-size: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  > div {
    width: 450px;
    padding: 30px 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: #fff;
    border-radius: 10px;
    .avatar-box {
      display: flex;
      justify-content: center;
      align-items: center;
      height: 150px;
    }
  }
  h2 {
    letter-spacing: 10px;
    text-align: center;
  }
  .custom-title {
    align-self: center;
    vertical-align: middle;
  }
}
</style>