client-base-v5/src/client/CasLogin.vue

<template>
  <div class="login">
    <div class="login_wrapper">
      <div class="login_form">
        <h3 style="text-align: center; margin-top: 30px">单点登录</h3>

        <div class="separator" />
        <div class="selectItem">
          <label for="">客户端</label>
          <select
            v-model="internet"
            name="language-choice"
            class="form-control"
            style="width: 100%"
          >
            <option value="pc">电脑端</option>
            <option value="mobile">移动端</option>
            <option value="propass">Propass</option>
          </select>
        </div>
        <div class="selectItem">
          <label>语言</label>
          <select
            v-model="languageSelected"
            name="language-choice"
            class="form-control"
            style="width: 100%"
          >
            <option value="zh-CN">中文</option>
            <option value="en-US">English</option>
          </select>
        </div>
        <button
          class="btn btn-default"
          style="width: 100%"
          @click="azureCasLogin"
        >
          确认
        </button>
      </div>
    </div>
  </div>
</template>

<script>
import Common from '../common/Common.js';
import LoginServicer from './LoginServicer.js';

export default {
  data: function () {
    return {
      internet: 'pc',
      languageSelected: 'zh-CN',
    };
  },
  mounted() {
    this.ticket = this.$route.query.ticket;
    this.redirect_uri = this.$route.query.serviceUrl;
    this.authSettingNo = this.$route.query.authSettingNo;
  },
  methods: {
    // 单点登录
    azureCasLogin: function () {
      let _self = this;
      const params = {
        ticket: _self.ticket,
        redirect_uri: _self.redirect_uri,
        authSettingNo: _self.authSettingNo,
        languageId: _self.languageSelected,
      };
      $.ajax({
        url: Common.getApiURL('CasLogin/login'),
        type: 'post',
        async: true,
        data: params,
        success: function (loginInfoData) {
          if (loginInfoData.errorCode == 0) {
            // _self.setTokenClient();
            LoginServicer.setLoginInfo(loginInfoData.data);
            if (_self.internet === 'pc') {
              localStorage.setItem('allowSound', false);
              window.location.href =
                Common.getRootPath() + '/#/desktop/dashboard';
            } else if (_self.internet === 'mobile') {
              window.location.href =
                Common.getRootPath() + '/app.html#/desktop/moduleSelect';
            } else {
              window.location.href =
                Common.getRootPath() + '/propass.html#/propassapp/menu';
            }
          } else {
            Notify.error(
              _self.$t('lang.login.loginFailure'),
              loginInfoData.errorMessage,
            );
          }
        },
        error: function (XMLHttpRequest, textStatus, errorThrown) {
          Common.processException(XMLHttpRequest, textStatus, errorThrown);
        },
      });
    },

    //设置 TokenClient
    setTokenClient: function () {
      $.ajax({
        url: Common.getApiURL('TokenClientResource/saveTokenClient'),
        type: 'post',
        dataType: 'json',
        contentType: 'application/json',
        beforeSend: function (request) {
          request.setRequestHeader('token', localStorage.getItem('#token'));
          request.setRequestHeader(
            'account',
            localStorage.getItem('#accountId'),
          );
        },
        success: function (baseObjectResponse) {
          console.log(baseObjectResponse, 'token添加成功');
        },
        error: function (XMLHttpRequest, textStatus, errorThrown) {
          Common.processException(XMLHttpRequest, textStatus, errorThrown);
        },
      });
    },
  },
};
</script>

<style scoped>
.login_wrapper {
  margin: 0px auto;
  padding-top: 5%;
  max-width: 350px;
  position: relative;
}

.login_form {
  top: 0px;
  width: 100%;
}

#login_box {
  width: 40%;
  height: 400px;
  margin: auto;
  margin-top: 4%;
  text-align: center;
  border-radius: 10px;
  padding: 50px 50px;
  border: 1px solid #dddddd;
}

h2 {
  margin-top: 5%;
}
.selectItem {
  display: flex;
  align-items: center;
  margin: 16px 0 16px 0;
}
.selectItem > label {
  width: 100px;
  text-align: left;
  font-size: 15px !important;
  color: rgba(0, 0, 0, 0.6);
}
.confirmBtn {
  margin-top: 50px;
  width: 60%;
  height: 30px;
  border-radius: 6px;
  border: 1px solid #e6e6e6;
  text-align: center;
  line-height: 30px;
  font-size: 15px;
  color: #333;
  background-color: #f7f7f7;
  text-decoration: none;
  font-weight: 400;
  user-select: none;
}
.confirmBtn:hover {
  background-color: #eaeaea;
  border-color: #adadad;
  background-position: 0 -15px;
}
.form-control {
  width: 74%;
  display: block;
  width: 75%;
  height: 34px;
  padding: 6px 12px;
  font-size: 14px;
  line-height: 1.42857143;
  color: #555555;
  background-color: #fff;
  background-image: none;
  border: 1px solid #ccc;
  border-radius: 4px;
}

.separator {
  border-top: 1px solid #d8d8d8;
  margin-top: 10px;
  padding-top: 10px;
}
</style>