intelligent_data_exchange_web
/
index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link rel="stylesheet" href="style/loginbase.css">
  <link rel="stylesheet" href="style/loggin.css">
  <script src="javascript/vue.js"></script>
  <script src="javascript/axios.js"></script>
  <script src="javascript/jquery.js"></script>
  <script src="javascript/api.js"></script>
  <title>登陆</title>
</head>
<body>
  <div id="app">
    <header>
      <i class="logo"></i>
      <span class="title">智能数据交换云服务平台</span>
    </header>
    <section>
    	<div class="" id="tabDiv">
    		<ul class="tab">
				<li class="tab_li active">账号登陆</li>
				<!-- <li class="tab_li zhengshuTab">证书登陆</li> -->
    		</ul>
    	</div>
      <div class="loggin">
          <i class="user"></i><input class="input" type="text" name="username" required placeholder="用户名" v-model="username" >
          <i class="password"></i><input class="input" type="password" name="password" required placeholder="密 码" v-model="password" @keyup.enter="doSubmit" >
          <p>
          	<input type="checkbox" id="awesome" />
			<label for="awesome" id="awesome_label">记住用户名</label>
          </p>
          <button  @click="doSubmit" >登录</button>
      </div>
      <div class="zhangshu" style="display: none;">
      	<p >请插入你的认证证书，识别成功后点击“证书登陆”按钮</p>
      	<button  @click="zhangshuSubmit" >证书登录</button>
      </div>
    </section>
  </div>

    <script>
		$(function(){
			$(".tab_li").click(function(){
					$(".tab_li").removeClass('active');
					$(this).addClass('active');
					if($(this).hasClass('zhengshuTab')){
						$('.zhangshu').show();
						$('.loggin').hide();
					}else{
						$('.zhangshu').hide();
						$('.loggin').show();
					}
			})
		})

        function isEmpty(value) {// undefined、null、[]、{}、空字符串及纯空白字符串：''、'    ' 等
            if (value == null) { // 等同于 value === undefined || value === null
                return true;
            }
            var type = Object.prototype.toString.call(value).slice(8, -1);
            switch (type) {
                case 'String':
                    return !$.trim(value);
                case 'Array':
                    return !value.length;
                case 'Object':
                    return $.isEmptyObject(value); // 普通对象使用 for...in 判断，有 key 即为 false
                default:
                    return false; // 其他对象均视作非空
            }
        }

        var getLoginToken = (params) => { return axios({
            url:tokenUri
            ,method:"POST"
            ,data:params
            ,headers: {'Authorization': 'Basic '+clientID,"Content-Type":"application/x-www-form-urlencoded"}
        }) };

      // 统一用户管理 模块
      var uamServer  = '/uaa';
      // 角色 url
      var roleApiPermissionUrl= zuulHost+uamServer+"/roleApiPermission/searchByRole";

      //用户登录跳转
      var loginUrl = 'http://192.168.0.156:8214/exchangeData/main.html' //公司内网服务器地址
      // var loginUrl = 'http://192.168.0.156:8233/exchangeData/main.html' //公司内网服务器地址
      // var loginUrl = 'http://127.0.0.1:80/data_exchange_webos/main.html' //公司内网服务器地址

      var initDictionaryList = params => { return axios({
          url:zuulHost+uamServer+'/dictionary/list'+params.access_token
          ,method:"POST"
          ,data:params.data
          ,headers: {"Content-Type":"application/json"}
      }) };

      /*登入时根据当前登入用户的角色获取资源权限 */
      var roleApiPermission  = params => { return axios({
          url:roleApiPermissionUrl+params.access_token
          ,method:"POST"
          ,data:params.data
          ,headers: {"Content-Type":"application/json"}
      }) };

      new Vue({
        el: '#app',
        data: {
            username: '',
            password: '',
            grant_type: 'password',
        },
        methods: {
          doSubmit:function () {
          	/*保存用户名*/
          	if(document.getElementById("awesome").checked){
          		localStorage.name = this.username;
          	}
            sessionStorage.psw = this.password;
            console.log(tokenUri);
            console.log('6666666666666666666666666666666')
            var _this=this;
            var params = "username="+this.username+"&password="+this.password+"&grant_type="+this.grant_type;
            getLoginToken(params).then(res=>{
              console.log('888888888888888888888888888888888888888')
                console.log(res);
                localStorage.token = res.data.access_token;
                localStorage.retoken = res.data.refresh_token;
                // 初始化字典
                if(!sessionStorage.allDictData||sessionStorage.allDictData=='[]'|| isEmpty(JSON.parse(sessionStorage.allDictData))){
                    let params2 = {
                        data:{isPageAble: false},
                        access_token:"?access_token="+localStorage.token
                    }
                    initDictionaryList(params2).then(res=>{
                        sessionStorage.allDictData = JSON.stringify(res.data.data.list) ;
                        //初始化api管理的权限信息
                        $.ajax({
                            type : "POST", //提交方式
                            url : zuulHost+"/uaa/roleApiPermission/searchByRole?access_token="+localStorage.token,//路径
                            data : "{}",
                            contentType: "application/json", // 请求数据格式(json)
                            async: false, // 同步
                            datatype: "json", // 返回数据格式(json)
                            headers: {"Content-Type":"application/json"},
                            success : function(result) {//返回数据根据结果进行相应的处理
                                if ( result.code === "S100101" ) {
                                    let json = JSON.stringify(result.data);
                                    localStorage.apiPermission = json;
                                    console.log(json);
                                } else {
                                    console.log("api权限获取失败！");
                                }
                            }
                        });

                        document.location = loginUrl;
                    }).catch(err=>{
                        console.log(err);
                    });
                }else{
                    //权限的获得
                    $.ajax({
                        type : "POST", //提交方式
                        url : zuulHost+"/uaa/roleApiPermission/searchByRole?access_token="+localStorage.token,//路径
                        data : "{}",
                        contentType: "application/json", // 请求数据格式(json)
                        async: false, // 同步
                        datatype: "json", // 返回数据格式(json)
                        headers: {"Content-Type":"application/json"},
                        success : function(result) {//返回数据根据结果进行相应的处理
                            if ( result.code === "S100101" ) {
                                let json = JSON.stringify(result.data);
                                localStorage.apiPermission = json;
                                console.log(json);
                            } else {
                                console.log("api权限获取失败！");
                            }
                        }
                    });
                    document.location = loginUrl;
                }
            })
            .catch(err=>{
                console.log(err);
                alert('请填写正确的帐号与密码')
            });
          },
          zhangshuSubmit(){/*证书登陆*/
          }
        },
        mounted(){
        	this.username = localStorage.name
        }
      });
    </script>
</body>
</html>