login add salt

frontend/vben/mock/sys/user.ts

@@ -1,4 +1,5 @@
 import { MockMethod } from 'vite-plugin-mock'
+import md5 from 'md5'
 import { resultError, resultSuccess, getRequestToken, requestParams } from '../_util'
 
 export function createFakeUserList() {
@@ -60,6 +61,14 @@ const fakeCodeList: any = {
   '2': ['2000', '4000', '6000'],
 }
 export default [
+  {
+    url: '/api/getLoginSalt',
+    timeout: 200,
+    method: 'get',
+    response: () => {
+      return resultSuccess({ salt: 'nc8w9f82hfioq2ci9hcwehcq' })
+    },
+  },
   // mock user login
   {
     url: '/api/login',
@@ -68,7 +77,9 @@ export default [
     response: ({ body }) => {
       const { username, password } = body
       const checkUser = createFakeUserList().find(
-        (item) => item.username === username && password === item.password,
+        (item) =>
+          item.username === username &&
+          password === md5(item.password + 'nc8w9f82hfioq2ci9hcwehcq'),
       )
       if (!checkUser) {
         return resultError('Incorrect account or password!')

frontend/vben/package.json

@@ -53,6 +53,7 @@
     "echarts": "^5.3.2",
     "intro.js": "^5.1.0",
     "lodash-es": "^4.17.21",
+    "md5": "^2.3.0",
     "mockjs": "^1.1.0",
     "nprogress": "^0.2.0",
     "path-to-regexp": "^6.2.0",
@@ -81,6 +82,7 @@
     "@types/inquirer": "^8.2.1",
     "@types/intro.js": "^3.0.2",
     "@types/lodash-es": "^4.17.6",
+    "@types/md5": "^2.3.2",
     "@types/mockjs": "^1.0.6",
     "@types/node": "^17.0.25",
     "@types/nprogress": "^0.2.0",

frontend/vben/src/api/sys/model/userModel.ts

@@ -67,3 +67,7 @@ export interface GetUserInfoModel {
   // 介绍
   desc?: string
 }
+
+export interface GetLoginSaltModel {
+  salt: string
+}

frontend/vben/src/api/sys/user.ts

@@ -7,11 +7,13 @@ import {
   RegisterParams,
   ResetPasswordResultModel,
   RegisterResultModel,
+  GetLoginSaltModel,
 } from './model/userModel'
 
 import { ErrorMessageMode } from '/#/axios'
 
 enum Api {
+  GetLoginSalt = '/getLoginSalt',
   Login = '/login',
   Logout = '/logout',
   ResetPassword = '/resetPassword',
@@ -66,6 +68,13 @@ export function registerApi(params: RegisterParams, mode: ErrorMessageMode = 'mo
   )
 }
 
+/**
+ * @description: getLoginSalt
+ */
+export function getLoginSalt(username: string) {
+  return defHttp.get<GetLoginSaltModel>({ url: Api.GetLoginSalt, params: { username: username } })
+}
+
 /**
  * @description: getUserInfo
  */

frontend/vben/src/views/sys/login/LoginForm.vue

@@ -80,6 +80,7 @@
 </template>
 <script lang="ts" setup>
   import { reactive, ref, unref, computed } from 'vue'
+  import md5 from 'md5'
 
   import { Checkbox, Form, Input, Row, Col, Button } from 'ant-design-vue'
   import LoginFormTitle from './LoginFormTitle.vue'
@@ -88,6 +89,7 @@
   import { useMessage } from '/@/hooks/web/useMessage'
 
   import { useUserStore } from '/@/store/modules/user'
+  import { getLoginSalt } from '/@/api/sys/user'
   import { LoginStateEnum, useLoginState, useFormRules, useFormValid } from './useLogin'
   import { useDesign } from '/@/hooks/web/useDesign'
   // import { onKeyStroke } from '@vueuse/core'
@@ -124,8 +126,9 @@
     if (!data) return
     try {
       loading.value = true
+      const { salt } = await getLoginSalt(data.account)
       const userInfo = await userStore.login({
-        password: data.password,
+        password: md5(data.password + salt),
         username: data.account,
         mode: 'none', //不要默认的错误提示
       })