Просмотр исходного кода

开发使用本地登录页面

zhaoyun 6 месяцев назад
Родитель
Сommit
19b5bf2bef
2 измененных файлов с 340 добавлено и 86 удалено
  1. 171 0
      src/views/login-prod.vue
  2. 169 86
      src/views/login.vue

+ 171 - 0
src/views/login-prod.vue

@@ -0,0 +1,171 @@
+<template>
+  <div>isc登录中.....</div>
+</template>
+
+<script>
+export default {
+  name: "Login2",
+  data() {
+    return {
+      redirect: undefined
+    };
+  },
+  watch: {
+    $route: {
+      handler: function (route) {
+        this.redirect = route.query && route.query.redirect;
+      },
+      immediate: true,
+    },
+  },
+  created() {
+    //获取isc信息 isc=0则进入正常登录 无则isc登录
+    let isc=this.$route.query.isc;
+    // isc='0';
+    console.log(isc)
+    if(isc==='0'){
+      this.$router.push("/adminLogin");
+      return;
+    }else{
+      this.getLoginByNameAndToken();
+    }
+  },
+  methods: {
+    getLoginByNameAndToken(){
+      //获取地址栏中的token
+      var token = this.$route.query.token;
+      var ticket = this.$route.query.ticket;
+      console.log(this.$route.query)
+      console.log(ticket)
+      //调用登录的接口
+      if(ticket==''||ticket==undefined||ticket==null){
+        window.location.replace("http://10.223.57.127:17089/isc_sso/login?service=http://25.212.177.102:19888?token=isc");
+      }else{
+        this.iscLogin(ticket);
+      }
+    },
+    // handlIscLogin() {
+    //   let url = window.location.href;
+    //   if (url.endsWith("admin")) {
+    //     this.$router.push("/adminLogin");
+    //     return;
+    //   }
+    //   let urls = url.split("?");
+    //   if (urls.length > 1) {
+    //     var ticket = this.$route.query.ticket;
+    //     if(ticket==''||ticket==undefined||ticket==null){
+    //       let params = urls[1].split("=");
+    //       let args = params[1];
+    //       if (ticket == "out") {
+    //         //生产 10.223.1.127:8098
+    //         //测试 10.223.57.127:17089
+    //         console.log("重定向ISC--------3");
+    //         window.location.href =
+    //           "http://10.223.57.127:17089/isc_sso/login?service=http://25.212.177.102:19888";
+    //       } else {
+    //         this.iscLogin(args);
+    //       }
+    //     } else {
+    //       console.log("重定向ISC--------1");
+    //       //生产 10.223.1.127:8098
+    //       window.location.href =
+    //         "http://10.223.57.127:17089/isc_sso/login?service=http://25.212.177.102:19888";
+    //     }
+    //   } else {
+    //     if (!url.endsWith("admin/")) {
+    //       console.log("重定向ISC--------2");
+    //       //生产 10.223.1.127:8098
+    //       window.location.href =
+    //         "http://10.223.57.127:17089/isc_sso/login?service=http://25.212.177.102:19888";
+    //     }
+    //   }
+    // },
+    iscLogin(ticket) {
+      // login2(ticket).then((res) => {
+      //   console.log(res)
+      //   if (res == 503) {
+      //     this.$message.warning("当前账号未开通权限!");
+      //   } else {
+      //     this.$router.push({ path: "/index" }).catch(()=>{});
+      //   }
+      // });
+      this.$store
+              .dispatch("Login2", ticket)
+              .then(() => {
+                this.$router
+                  .push({ path: this.redirect || "/" })
+                  .catch((error) => {});
+              })
+              .catch((error) => {
+                throw error;
+              });
+    },
+    getUrlParam(href) {
+      return href.substring(1); // 去除开头的"?"
+    },
+  },
+};
+</script>
+
+<style rel="stylesheet/scss" lang="scss">
+.login {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 100%;
+  background-image: url("../assets/images/login-background.jpg");
+  background-size: cover;
+}
+.title {
+  margin: 0px auto 30px auto;
+  text-align: center;
+  color: #707070;
+}
+
+.login-form {
+  border-radius: 6px;
+  background: #ffffff;
+  width: 400px;
+  padding: 25px 25px 5px 25px;
+  .el-input {
+    height: 38px;
+    input {
+      height: 38px;
+    }
+  }
+  .input-icon {
+    height: 39px;
+    width: 14px;
+    margin-left: 2px;
+  }
+}
+.login-tip {
+  font-size: 13px;
+  text-align: center;
+  color: #bfbfbf;
+}
+.login-code {
+  width: 33%;
+  height: 38px;
+  float: right;
+  img {
+    cursor: pointer;
+    vertical-align: middle;
+  }
+}
+.el-login-footer {
+  height: 40px;
+  line-height: 40px;
+  position: fixed;
+  bottom: 0;
+  width: 100%;
+  text-align: center;
+  color: #fff;
+  font-family: Arial;
+  font-size: 12px;
+  letter-spacing: 1px;
+}
+.login-code-img {
+  height: 38px;
+}
+</style>

+ 169 - 86
src/views/login.vue

@@ -1,109 +1,192 @@
 <template>
-  <div>isc登录中.....</div>
+  <div class="login">
+    <el-form ref="loginForm" :model="loginForm" :rules="loginRules" class="login-form">
+      <h3 class="title">智能配网应用平台</h3>
+      <el-form-item prop="username">
+        <el-input
+          v-model="loginForm.username"
+          type="text"
+          auto-complete="off"
+          placeholder="账号"
+        >
+          <svg-icon slot="prefix" icon-class="user" class="el-input__icon input-icon" />
+        </el-input>
+      </el-form-item>
+      <el-form-item prop="password">
+        <el-input
+          v-model="loginForm.password"
+          type="password"
+          auto-complete="off"
+          placeholder="密码"
+          @keyup.enter.native="handleLogin"
+        >
+          <svg-icon slot="prefix" icon-class="password" class="el-input__icon input-icon" />
+        </el-input>
+      </el-form-item>
+      <el-form-item prop="code" v-if="captchaEnabled">
+        <el-input
+          v-model="loginForm.code"
+          auto-complete="off"
+          placeholder="验证码"
+          style="width: 63%"
+          @keyup.enter.native="handleLogin"
+        >
+          <svg-icon slot="prefix" icon-class="validCode" class="el-input__icon input-icon" />
+        </el-input>
+        <div class="login-code">
+          <img :src="codeUrl" @click="getCode" class="login-code-img"/>
+        </div>
+      </el-form-item>
+      <el-checkbox v-model="loginForm.rememberMe" style="margin:0px 0px 25px 0px;">记住密码</el-checkbox>
+      <el-form-item style="width:100%;">
+        <el-button
+          :loading="loading"
+          size="medium"
+          type="primary"
+          style="width:100%;"
+          @click.native.prevent="handleLogin"
+        >
+          <span v-if="!loading">登 录</span>
+          <span v-else>登 录 中...</span>
+        </el-button>
+        <div style="float: right;" v-if="register">
+          <router-link class="link-type" :to="'/register'">立即注册</router-link>
+        </div>
+      </el-form-item>
+    </el-form>
+    <!--  底部  -->
+    <div class="el-login-footer">
+      <span>Copyright © 2024-2026 hnyysoftware All Rights Reserved.</span>
+    </div>
+  </div>
 </template>
 
 <script>
+import { getCodeImg ,getPublicKey} from "@/api/login";
+import Cookies from "js-cookie";
+import { encrypt, decrypt } from '@/utils/jsencrypt';
 export default {
-  name: "Login2",
+  name: "Login",
   data() {
     return {
+      codeUrl: "",
+      loginForm: {
+        username: "admin",
+        password: "admin123",
+        rememberMe: false,
+        code: "",
+        uuid: ""
+      },
+      loginRules: {
+        username: [
+          { required: true, trigger: "blur", message: "请输入您的账号" }
+        ],
+        password: [
+          { required: true, trigger: "blur", message: "请输入您的密码" }
+        ],
+        code: [{ required: true, trigger: "change", message: "请输入验证码" }]
+      },
+      loading: false,
+      // 验证码开关
+      captchaEnabled: true,
+      // 注册开关
+      register: false,
       redirect: undefined
     };
   },
   watch: {
     $route: {
-      handler: function (route) {
+      handler: function(route) {
         this.redirect = route.query && route.query.redirect;
       },
-      immediate: true,
-    },
+      immediate: true
+    }
   },
   created() {
-    //获取isc信息 isc=0则进入正常登录 无则isc登录
-    let isc=this.$route.query.isc;
-    // isc='0';
-    console.log(isc)
-    if(isc==='0'){
-      this.$router.push("/adminLogin");
-      return;
-    }else{
-      this.getLoginByNameAndToken();
-    }
+    this.getCode();
+    this.getCookie();
   },
   methods: {
-    getLoginByNameAndToken(){
-      //获取地址栏中的token
-      var token = this.$route.query.token;
-      var ticket = this.$route.query.ticket;
-      console.log(this.$route.query)
-      console.log(ticket)
-      //调用登录的接口
-      if(ticket==''||ticket==undefined||ticket==null){
-        window.location.replace("http://10.223.57.127:17089/isc_sso/login?service=http://25.212.177.102:19888?token=isc");
-      }else{
-        this.iscLogin(ticket);
-      }
+    getCode() {
+      getCodeImg().then(res => {
+		 
+        this.captchaEnabled = res.captchaEnabled === undefined ? true : res.captchaEnabled;
+        if (this.captchaEnabled) {
+          this.codeUrl = "data:image/gif;base64," + res.img;
+					//alert(this.codeUrl+"122323")
+          this.loginForm.uuid = res.uuid;
+        }
+      });
     },
-    // handlIscLogin() {
-    //   let url = window.location.href;
-    //   if (url.endsWith("admin")) {
-    //     this.$router.push("/adminLogin");
-    //     return;
-    //   }
-    //   let urls = url.split("?");
-    //   if (urls.length > 1) {
-    //     var ticket = this.$route.query.ticket;
-    //     if(ticket==''||ticket==undefined||ticket==null){
-    //       let params = urls[1].split("=");
-    //       let args = params[1];
-    //       if (ticket == "out") {
-    //         //生产 10.223.1.127:8098
-    //         //测试 10.223.57.127:17089
-    //         console.log("重定向ISC--------3");
-    //         window.location.href =
-    //           "http://10.223.57.127:17089/isc_sso/login?service=http://25.212.177.102:19888";
-    //       } else {
-    //         this.iscLogin(args);
-    //       }
-    //     } else {
-    //       console.log("重定向ISC--------1");
-    //       //生产 10.223.1.127:8098
-    //       window.location.href =
-    //         "http://10.223.57.127:17089/isc_sso/login?service=http://25.212.177.102:19888";
-    //     }
-    //   } else {
-    //     if (!url.endsWith("admin/")) {
-    //       console.log("重定向ISC--------2");
-    //       //生产 10.223.1.127:8098
-    //       window.location.href =
-    //         "http://10.223.57.127:17089/isc_sso/login?service=http://25.212.177.102:19888";
-    //     }
-    //   }
-    // },
-    iscLogin(ticket) {
-      // login2(ticket).then((res) => {
-      //   console.log(res)
-      //   if (res == 503) {
-      //     this.$message.warning("当前账号未开通权限!");
-      //   } else {
-      //     this.$router.push({ path: "/index" }).catch(()=>{});
-      //   }
-      // });
-      this.$store
-              .dispatch("Login2", ticket)
-              .then(() => {
-                this.$router
-                  .push({ path: this.redirect || "/" })
-                  .catch((error) => {});
-              })
-              .catch((error) => {
-                throw error;
-              });
+	getPublicKey() {
+	  return new Promise((resolve, reject) => {
+	    getPublicKey()
+	      .then((res) => {
+	        resolve(res);
+	      })
+	      .catch((error) => {
+	        reject(error);
+	      });
+	  });
+	},
+    getCookie() {
+      const username = Cookies.get("username");
+      const password = Cookies.get("password");
+      const rememberMe = Cookies.get('rememberMe')
+      this.loginForm = {
+        username: username === undefined ? this.loginForm.username : username,
+        password: password === undefined ? this.loginForm.password : decrypt(password),
+        rememberMe: rememberMe === undefined ? false : Boolean(rememberMe)
+      };
     },
-    getUrlParam(href) {
-      return href.substring(1); // 去除开头的"?"
-    },
-  },
+    handleLogin() {
+      this.$refs.loginForm.validate(valid => {
+        if (valid) {
+          this.loading = true;
+          if (this.loginForm.rememberMe) {
+            Cookies.set("username", this.loginForm.username, { expires: 30 });
+            Cookies.set("password", encrypt(this.loginForm.password), { expires: 30 });
+            Cookies.set('rememberMe', this.loginForm.rememberMe, { expires: 30 });
+          } else {
+            Cookies.remove("username");
+            Cookies.remove("password");
+            Cookies.remove('rememberMe');
+          }
+					Cookies.set("username", this.loginForm.username, { expires: 30 });
+      //     this.$store.dispatch("Login", this.loginForm).then(() => {
+      //       this.$router.push({ path: this.redirect || "/" }).catch(()=>{});
+      //     }).catch(() => {
+      //       this.loading = false;
+      //       if (this.captchaEnabled) {
+      //         this.getCode();
+      //       }
+      //     });
+	  this.getPublicKey().then((res) => {
+	    let publicKey = res.publicKey;
+	    this.loginForm.password = encrypt(
+	      this.loginForm.password,
+	      publicKey
+	    );
+	    this.$store
+	      .dispatch("Login", this.loginForm)
+	      .then(() => {
+	        this.$router
+	          .push({ path: this.redirect || "/" })
+	          .catch((error) => {});
+	      })
+	      .catch(() => {
+	        this.loginForm.password = null;
+	        this.loading = false;
+	        if (this.captchaEnabled) {
+	          this.getCode();
+	        }
+	      });
+	  });
+	  
+        }
+       });
+    }
+  }
 };
 </script>