解决密码加密问题

public/index.html

@@ -19,4 +19,5 @@
     <div id="app"></div>
     <!-- built files will be auto injected -->
   </body>
+  <script src="./SmCrypto.min.js"></script>
 </html>

src/layout/components/SideBar/UserIcon.vue

@@ -1,14 +1,8 @@
 <template>
   <div class="header_user_container">
     <!-- 菜单 -->
-    <el-menu
-      :default-active="'/'"
-      :unique-opened="true"
-      :active-text-color="'#134BEA'"
-      :collapse-transition="false"
-      mode="horizontal"
-      class="header_menu"
-    >
+    <el-menu :default-active="'/'" :unique-opened="true" :active-text-color="'#134BEA'" :collapse-transition="false"
+      mode="horizontal" class="header_menu">
       <!-- #TODO 目前写死 后面再改 -->
       <!-- 根据 sidebarRouters 路由，生成菜单 -->
       <!-- <sidebar-item
@@ -42,9 +36,9 @@
     <!-- 时间 -->
     <div class="time_box">
       <!-- #TODO 动态获取实时变化 -->
-      <span class="time_day">{{fmtTime?fmtTime[0]:null}}</span>
-      <span class="time_weekday">星期{{weekday}}</span>
-      <span class="time_date">{{fmtTime?fmtTime[1]:null}}</span>
+      <span class="time_day">{{ fmtTime ? fmtTime[0] : null }}</span>
+      <span class="time_weekday">星期{{ weekday }}</span>
+      <span class="time_date">{{ fmtTime ? fmtTime[1] : null }}</span>
     </div>
     <div class="header_user_line">|</div>
     <!-- 图标 -->
@@ -57,22 +51,24 @@
       <i class="el-icon-user-solid"></i>
       <span>username</span>
       <div class="header_user_line">/</div>
-      <i class="el-icon-switch-button" style="margin-right: 2rem"></i>
+      <i class="el-icon-switch-button" style="margin-right: 2rem" @click="outUser"></i>
     </div>
   </div>
 </template>
 
 <script>
 import { formatDate } from "@/utils/common";
+import { loginOut } from "@/api/login/login"
 export default {
   data() {
     return {
       // 当前时间
-      fmtTime :[],
+      fmtTime: [],
       // 星期数
-      weekday:'',
+      weekday: '',
       // 定时器
-      timer:''
+      timer: '',
+      userToken: "",//用户token
     };
   },
 
@@ -81,11 +77,12 @@ export default {
     setTimeout(() => {
       this.getTime();
     }, 1);
-    this.timer = setInterval(()=>{
+    this.timer = setInterval(() => {
       this.getTime();
-    },1000)
+    }, 1000)
+    this.getToken()
   },
-  beforeDestroy(){
+  beforeDestroy() {
     // 组件销毁前清除定时器
     clearInterval(timer)
   },
@@ -98,6 +95,20 @@ export default {
       this.weekday = ["日", "一", "二", "三", "四", "五", "六"][thisDay]
       this.fmtTime = formatDate(time).split(' ')
     },
+    async outUser() {
+      let res = await loginOut({sessionid:this.userToken})
+      if(res ==='ok'){
+        this.$router.push("/login")
+        localStorage.removeItem('userInfo')
+      }
+    },
+    getToken() {
+      let userInfo = localStorage.getItem('userInfo')
+      if (userInfo) {
+        userInfo = JSON.parse(userInfo)
+        this.userToken = userInfo.sessionid
+      }
+    }
   },
 };
 </script>
@@ -106,19 +117,23 @@ export default {
 .header_user_container {
   display: flex;
   align-items: center;
+
   .time_box {
     display: flex;
     align-items: center;
     cursor: default;
     font-size: 1.4rem;
     color: #516380;
+
     .time_day {
       font-family: DS4Font;
       width: 8rem;
     }
+
     .time_weekday {
       margin: 0 1rem;
     }
+
     .time_date {
       font-family: DS4Font;
       margin-right: 2rem;
@@ -126,19 +141,23 @@ export default {
       letter-spacing: 0.3rem;
     }
   }
+
   .icon_box {
     display: flex;
     align-items: center;
     cursor: pointer;
+
     i {
       font-size: 1.8rem;
       color: #00cefb;
       margin-right: 0.5rem;
     }
+
     span {
       font-size: 1.4rem;
       color: #516380;
     }
+
     .header_user_line {
       font-size: 1.33rem;
       margin: 0 2rem;
@@ -147,15 +166,18 @@ export default {
     }
   }
 }
+
 .header_menu {
   height: 5rem;
 }
+
 .header_user_line {
   font-size: 1.33rem;
   margin-right: 2rem;
   color: #7a13e1;
   cursor: pointer;
 }
+
 ::v-deep .el-menu-item {
   height: 5rem !important;
   font-size: 1.33rem !important;
@@ -164,6 +186,7 @@ export default {
   padding: 0 !important;
   margin-right: 2rem !important;
 }
+
 ::v-deep .is-active {
   border-bottom: 4px solid #134bea !important;
 }

src/views/login/Login.vue

@@ -8,30 +8,30 @@
                 <el-form ref="form" :model="form">
                     <el-form-item class="loginItem">
                         <p class="loginItemP">账号</p>
-                        <input class="loginInput" v-model="form.username" @blur="userRule" placeholder="请输入账号">
+                        <input class="loginInput" v-model="form.username" @change="userRule" placeholder="请输入账号">
                         <p class="blurP" v-if="userBlur">账号不能为空</p>
                     </el-form-item>
                     <el-form-item class="loginItem">
                         <p class="loginItemP">密码</p>
-                        <input class="loginInput" v-model="form.password" @blur="passRule" placeholder="请输入密码"
+                        <input class="loginInput" v-model="form.password" @change="passRule" placeholder="请输入密码"
                             :type="inputType">
                         <img class="imgEyes" src="../../assets/font/fluent：eye-20-regular.png" alt="" @click="changeType">
                         <p class="blurP" v-if="passBlur">密码不能为空</p>
                     </el-form-item>
                     <el-form-item class="loginItem">
                         <el-checkbox v-model="rememberUser" @change="rememberNow">记住账号</el-checkbox><br>
-                        <el-button class="loginButton" @click="loginNow">登录</el-button>
+                        <el-button class="loginButton" @click="loginNow" >登录</el-button>
                     </el-form-item>
                 </el-form>
             </div>
         </div>
     </div>
 </template>
-
+<!-- <script src="../../utils/SmCrypto.min.js"></script> -->
 <script>
 import { login } from '../../api/login/login.js'
 import sm from 'sm-crypto';
-import sms from '../../utils/SmCrypto.min.js'
+// import { doSm3AndSm2Encrypt } from '../../utils/SmCrypto.min.js'
 export default {
     data() {
         return {
@@ -64,12 +64,24 @@ export default {
         },
         // 登录按钮
         async loginNow() {
-            // console.log(this.form.username, this.form.password, 'login');
             if (this.form.username != '' && this.form.password != "") {
                 if (!this.userBlur && !this.passBlur) {
-                    let res = await login({ login_account: this.form.username, pwd: this.form.password })
-                    // this.$router.push("/")
-                    console.log(res, '1');
+                    const wordType = this.encryptPassword(this.form.password)
+                    let res = await login({ login_account: this.form.username, pwd: wordType })
+                    if (res.returncode === 200) {
+                        this.$message({
+                            type: "success",
+                            message: "登陆成功"
+                        })
+                        this.$router.push("/")
+                        localStorage.setItem('userInfo', JSON.stringify(res.data))
+                    } else if(res.returncode === 500) {
+                        this.$message({
+                            type:"error",
+                            message:res.msg
+                        })
+                    }
+
                 } else {
                     this.$message({
                         message: '账号或密码错误',
@@ -109,10 +121,22 @@ export default {
             }
         },
         encryptPassword(password) {
-            return sm.sm3(password);
+            let val = SmCrypto.doSm3AndSm2Encrypt(password) + '0000'
+            let ascCode = 0
+            for (var i = 0; i < password.length; i++) {
+                ascCode = password.charCodeAt(i).toString(16);
+                // console.log(ascCode,'asc');
+                if (ascCode.length == 1) {
+                    val += '00' + ascCode
+                } else if (ascCode.length == 2) {
+                    val += '0' + ascCode
+                } else {
+                    val += ascCode
+                }
+            }
+            console.log(val, 'val');
+            return val
         },
-        getPassWord(str){
-        }
     },
     created() {
         // 通过本地使用户名显示