client-base-v5/src/client/SamlLogin.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="azureSamlLogin">确认</button>
      </div>
    </div>
  </div>
</template>

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

export default {
  data: function () {
    return {
      internet: 'pc',
      languageSelected: 'zh-CN',
    };
  },
  methods: {
    // 单点登录
    azureSamlLogin: function () {
      let _self = this;
      const params = {
        languageId: _self.languageSelected,
      };
      $.ajax({
        url: Common.getApiURL('SamlLogin/login'),
        type: 'post',
        async: true,
        data: params,
        success: function (loginInfoData) {
          if (loginInfoData.errorCode == 0) {
            if (_self.internet === 'pc') {
              LoginService.setLoginInfo(loginInfoData.data, _self.$router);
              LoginService.saveLocalStorage(_self);
              _self.setTokenClient(loginInfoData.data.token);
              localStorage.setItem('allowSound', false);
              window.location.href =
                Common.getRootPath() + '/#/desktop/dashboard';
            } else if (_self.internet === 'mobile') {
              var loginInfo = loginInfoData.data;
              Common.clearLocalStorage();
              Common.clearAppCookie(loginInfo);
              _self.setAppLocalStorage(loginInfo);
              _self.setTokenClient();
              window.location.href =
                Common.getRootPath() + '/app.html#/desktop/moduleSelect';
            } else {
              Common.clearLocalStorage();
              $.removeCookie('token', { path: '/' });
              $.removeCookie('token', { path: '/pcapp' });
              $.cookie('token', loginInfoData.data.token, {
                expires: 7,
                path: '/',
              });
              _self.setPropassLocalStorage(loginInfoData);
              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);
        },
      });
    },

    // 设置 App localStorage
    setAppLocalStorage: function (loginInfo) {
      const _self = this;
      if (!window.localStorage) {
        Notify.error('错误', '浏览器不支持localstorage', false);
      } else {
        const storage = window.localStorage;
        const loginInfo1 = JSON.stringify(loginInfo);
        storage.setItem('#loginInfo', loginInfo1);
        storage.setItem('account', loginInfo.accountId);
        storage.setItem('token', loginInfo.token);
        storage.setItem('rememberPassword', false);
        localStorage.setItem('#languageSelected', _self.languageSelected);
      }
    },
    //  设置 Propass localStorage
    setPropassLocalStorage: function (loginInfo) {
      const _self = this;

      const loginInfoStr = JSON.stringify(loginInfo);
      localStorage.setItem('json_LoginInfo', loginInfoStr);
      localStorage.setItem('#token', loginInfo.data.token);
      localStorage.setItem('#accountId', loginInfo.data.accountId);
      localStorage.setItem('#languageSelected', _self.languageSelected);
      localStorage.setItem('rememberPassword', false);
    },
    //设置 TokenClient
    setTokenClient: function () {
      const _self = this;
      $.ajax({
        url: Common.getApiURL('TokenClientResource/saveTokenClient'),
        type: 'post',
        dataType: 'json',
        contentType: 'application/json',
        beforeSend: function (request) {
          if (_self.internet === 'pc') {
            request.setRequestHeader('token', localStorage.getItem('#token'));
          } else {
            let token = $.cookie('token');
            let account = $.cookie('account');
            if (token == undefined) {
              const localStorageToken = localStorage.getItem('token');
              if (localStorageToken != undefined) {
                token = localStorageToken;
              }
            }
            if (account == undefined) {
              const localStorageAccount = localStorage.getItem('account');
              if (localStorageAccount != undefined) {
                account = localStorageAccount;
              }
            }
            request.setRequestHeader('account', account);
            request.setRequestHeader('token', token);
          }
        },
        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>