登录密码非对称加密

web/package.json

@@ -23,6 +23,7 @@
         "element-plus": "^2.3.8",
         "highlight.js": "^11.8.0",
         "js-cookie": "^3.0.5",
+        "jsencrypt": "^3.3.2",
         "marked": "4.3.0",
         "mitt": "^3.0.1",
         "nprogress": "^0.2.0",

web/src/api/user.js

@@ -163,3 +163,12 @@ export const resetPassword = (data) => {
     data: data
   })
 }
+
+//返回公钥
+
+export const routerPublicKey = () => {
+  return service({
+    url: '/base/routerPublicKey',
+    method: 'get'
+  })
+}

web/src/view/login/index.vue

@@ -153,10 +153,11 @@
 </template>
 
 <script setup>
-import { captcha } from '@/api/user'
+import JSEncrypt from 'jsencrypt';  
+import { captcha,routerPublicKey } from '@/api/user'
 import { checkDB } from '@/api/initdb'
 import BottomInfo from '@/view/layout/bottomInfo/bottomInfo.vue'
-import { reactive, ref } from 'vue'
+import { reactive, ref, onMounted } from 'vue'
 import { ElMessage } from 'element-plus'
 import { useRouter } from 'vue-router'
 import { useUserStore } from '@/pinia/modules/user'
@@ -201,8 +202,8 @@ loginVerify()
 const loginForm = ref(null)
 const picPath = ref('')
 const loginFormData = reactive({
-  username: 'admin',
-  password: '123456',
+  username: '',
+  password: '',
   captcha: '',
   captchaId: '',
   openCaptcha: false,
@@ -221,9 +222,25 @@ const rules = reactive({
   ],
 })
 
+const publicKey = ref()
+//获取公钥
+const queryPublicKey = async() => {
+  const req = await routerPublicKey()
+  publicKey.value = req.data.publicKey
+}
+
+
 const userStore = useUserStore()
+//登录
 const login = async() => {
-  return await userStore.LoginIn(loginFormData)
+  //密码加密
+  const instance = new JSEncrypt();
+  instance.setPublicKey(publicKey.value);
+  loginFormData.password = instance.encrypt(loginFormData.password)
+
+  const bool = await userStore.LoginIn(loginFormData)
+  loginFormData.password = ""
+  return bool
 }
 const submitForm = () => {
   loginForm.value.validate(async(v) => {
@@ -260,4 +277,7 @@ const checkInit = async() => {
   }
 }
 
+onMounted(() => {
+  queryPublicKey()
+})
 </script>