UPDATE: 处理控制台警告问题

frontend/src/views/login/components/LoginForm.vue

@@ -1,76 +1,57 @@
 <template>
-  <el-form
-      ref='loginFormRef'
-      :model='loginForm'
-      :rules='loginRules'
-      size='large'
-  >
-    <el-form-item prop='username'>
-      <el-input v-model='loginForm.username' placeholder='用户名'>
-        <template #prefix>
-          <el-icon class='el-input__icon'>
-            <user/>
-          </el-icon>
-        </template>
-      </el-input>
-    </el-form-item>
-    <el-form-item prop='password'>
-      <el-input
-          v-model='loginForm.password'
-          type='password'
-          placeholder='密码'
-          show-password
-          autocomplete='new-password'
-      >
-        <template #prefix>
-          <el-icon class='el-input__icon'>
-            <lock/>
-          </el-icon>
-        </template>
-      </el-input>
-    </el-form-item>
-    <el-form-item prop='checked'>
-      <el-checkbox v-model="loginForm.checked">记住我</el-checkbox>
-    </el-form-item>
-  </el-form>
-  <div class='login-btn'>
-    <el-button
-        :icon='UserFilled'
-        round
-        size='large'
-        type='primary'
-        :loading='loading'
-        @click='login(loginFormRef)'
-    >
-      登录
-    </el-button>
-    <el-button
-        :icon='CircleClose'
-        round
-        size='large'
-        @click='resetForm(loginFormRef)'
-    >
-      重置
-    </el-button>
-  </div>
+    <el-form ref="loginFormRef" :model="loginForm" :rules="loginRules" size="large">
+        <el-form-item prop="username">
+            <el-input v-model="loginForm.username" placeholder="用户名">
+                <template #prefix>
+                    <el-icon class="el-input__icon">
+                        <user />
+                    </el-icon>
+                </template>
+            </el-input>
+        </el-form-item>
+        <el-form-item prop="password">
+            <el-input
+                v-model="loginForm.password"
+                type="password"
+                placeholder="密码"
+                show-password
+                autocomplete="new-password"
+            >
+                <template #prefix>
+                    <el-icon class="el-input__icon">
+                        <lock />
+                    </el-icon>
+                </template>
+            </el-input>
+        </el-form-item>
+        <el-form-item prop="checked">
+            <el-checkbox v-model="loginForm.checked">记住我</el-checkbox>
+        </el-form-item>
+    </el-form>
+    <div class="login-btn">
+        <el-button :icon="UserFilled" round size="large" type="primary" :loading="loading" @click="login(loginFormRef)">
+            登录
+        </el-button>
+        <el-button :icon="CircleClose" round size="large" @click="resetForm(loginFormRef)">重置</el-button>
+    </div>
 </template>
 
-<script setup lang='ts'>
-import {useRouter} from 'vue-router'
-import {HOME_URL} from '@/config'
-import {getTimeState} from '@/utils'
-import {type Dict} from '@/api/interface'
-import {type Login} from '@/api/user/interface/user'
-import type {ElForm} from 'element-plus'
-import {ElNotification} from 'element-plus'
-import {getDictList, getPublicKey, loginApi} from '@/api/user/login'
-import {useUserStore} from '@/stores/modules/user'
-import {useTabsStore} from '@/stores/modules/tabs'
-import {useKeepAliveStore} from '@/stores/modules/keepAlive'
-import {initDynamicRouter} from '@/routers/modules/dynamicRouter'
-import {CircleClose, UserFilled} from '@element-plus/icons-vue'
-import {useAuthStore} from '@/stores/modules/auth'
-import {useDictStore} from "@/stores/modules/dict";
+<script setup lang="ts">
+import { useRouter } from 'vue-router'
+import { HOME_URL } from '@/config'
+import { getTimeState } from '@/utils'
+import { type Dict } from '@/api/interface'
+import { type Login } from '@/api/user/interface/user'
+import type { ElForm } from 'element-plus'
+import { ElNotification } from 'element-plus'
+import { getDictList, getPublicKey, loginApi } from '@/api/user/login'
+import { useUserStore } from '@/stores/modules/user'
+import { useTabsStore } from '@/stores/modules/tabs'
+import { useKeepAliveStore } from '@/stores/modules/keepAlive'
+import { initDynamicRouter } from '@/routers/modules/dynamicRouter'
+import { CircleClose, UserFilled } from '@element-plus/icons-vue'
+import { useAuthStore } from '@/stores/modules/auth'
+import { useDictStore } from '@/stores/modules/dict'
 import forge from 'node-forge'
 
 const authStore = useAuthStore()
@@ -80,97 +61,97 @@ const tabsStore = useTabsStore()
 const keepAliveStore = useKeepAliveStore()
 
 const dictStore = useDictStore()
-let publicKey: any = null;
+let publicKey: any = null
 
-
-type FormInstance = InstanceType<typeof ElForm>;
+type FormInstance = InstanceType<typeof ElForm>
 const loginFormRef = ref<FormInstance>()
 const loginRules = reactive({
-  username: [{required: true, message: '请输入用户名', trigger: 'blur'}],
-  password: [{required: true, message: '请输入密码', trigger: 'blur'}],
+    username: [{ required: true, message: '请输入用户名', trigger: 'blur' }],
+    password: [{ required: true, message: '请输入密码', trigger: 'blur' }]
 })
 
 const loading = ref(false)
 const loginForm = reactive<Login.ReqLoginForm>({
-  username: '',
-  password: '',
-  checked: false,
+    username: '',
+    password: '',
+    checked: false
 })
 
 // login
 const login = (formEl: FormInstance | undefined) => {
-  if (!formEl) return
-  formEl.validate(async (valid) => {
-    if (!valid) return
-    loading.value = true
-    try {
-      let {data: publicKeyBase64}: { data: string } = await getPublicKey(loginForm.username)
-      //将base64格式的公钥转换为Forge可以使用的格式
-      const publicKeyDer = forge.util.decode64(publicKeyBase64);
-      publicKey = forge.pki.publicKeyFromPem(forge.pki.publicKeyToPem(forge.pki.publicKeyFromAsn1(forge.asn1.fromDer(publicKeyDer))));
+    if (!formEl) return
+    formEl.validate(async valid => {
+        if (!valid) return
+        loading.value = true
+        try {
+            let { data: publicKeyBase64 }: { data: string } = await getPublicKey(loginForm.username)
+            //将base64格式的公钥转换为Forge可以使用的格式
+            const publicKeyDer = forge.util.decode64(publicKeyBase64)
+            publicKey = forge.pki.publicKeyFromPem(
+                forge.pki.publicKeyToPem(forge.pki.publicKeyFromAsn1(forge.asn1.fromDer(publicKeyDer)))
+            )
 
-      // 1.执行登录接口
-      const {data} = await loginApi({
-        username: forge.util.encode64(loginForm.username),
-        password: encryptPassword(loginForm.password),
-      })
-      userStore.setAccessToken(data.accessToken)
-      userStore.setRefreshToken(data.refreshToken)
-      userStore.setUserInfo(data.userInfo)
-      if(loginForm.checked){
-        userStore.setExp(Date.now() + 1000 * 60 * 60 * 24 * 30)
-      }
-      const response = await getDictList()
-      const dictData = response.data as unknown as Dict[]
-      await dictStore.initDictData(dictData)
-      // 2.添加动态路由
-      await initDynamicRouter()
+            // 1.执行登录接口
+            const { data } = await loginApi({
+                username: forge.util.encode64(loginForm.username),
+                password: encryptPassword(loginForm.password)
+            })
+            userStore.setAccessToken(data.accessToken)
+            userStore.setRefreshToken(data.refreshToken)
+            userStore.setUserInfo(data.userInfo)
+            if (loginForm.checked) {
+                userStore.setExp(Date.now() + 1000 * 60 * 60 * 24 * 30)
+            }
+            const response = await getDictList()
+            const dictData = response.data as unknown as Dict[]
+            await dictStore.initDictData(dictData)
+            // 2.添加动态路由
+            await initDynamicRouter()
 
-      // 3.清空 tabs、keepAlive 数据
-      tabsStore.setTabs([])
-      keepAliveStore.setKeepAliveName([])
+            // 3.清空 tabs、keepAlive 数据
+            tabsStore.setTabs([])
+            keepAliveStore.setKeepAliveName([])
 
-      // 4.跳转到首页
-      router.push(HOME_URL)
-      // 5.登录默认不显示菜单和导航栏
-      authStore.resetAuthStore()
-      ElNotification({
-        title: getTimeState(),
-        message: '登录成功',
-        type: 'success',
-        duration: 3000,
-      })
-    } finally {
-      loading.value = false
-    }
-  })
+            // 4.跳转到首页
+            router.push(HOME_URL)
+            // 5.登录默认不显示菜单和导航栏
+            authStore.resetAuthStore()
+            ElNotification({
+                title: getTimeState(),
+                message: '登录成功',
+                type: 'success',
+                duration: 3000
+            })
+        } finally {
+            loading.value = false
+        }
+    })
 }
 
 // resetForm
 const resetForm = (formEl: FormInstance | undefined) => {
-  if (!formEl) return
-  formEl.resetFields()
+    if (!formEl) return
+    formEl.resetFields()
 }
 
 onMounted(() => {
-  // 监听 enter 事件（调用登录）
-  document.onkeydown = (e: KeyboardEvent) => {
-    e = (window.event as KeyboardEvent) || e
-    if (e.code === 'Enter' || e.code === 'enter' || e.code === 'NumpadEnter') {
-      if (loading.value) return
-      login(loginFormRef.value)
+    // 监听 enter 事件（调用登录）
+    document.onkeydown = (e: KeyboardEvent) => {
+        e = (window.event as KeyboardEvent) || e
+        if (e.code === 'Enter' || e.code === 'enter' || e.code === 'NumpadEnter') {
+            if (loading.value) return
+            login(loginFormRef.value)
+        }
     }
-  }
 })
 
 const encryptPassword = (password: string) => {
-  const encrypted = publicKey.encrypt(password, 'RSAES-PKCS1-V1_5');
-  // 将加密后的数据转换为base64格式以便传输
-  return forge.util.encode64(encrypted);
+    const encrypted = publicKey.encrypt(password, 'RSAES-PKCS1-V1_5')
+    // 将加密后的数据转换为base64格式以便传输
+    return forge.util.encode64(encrypted)
 }
-
 </script>
 
-<style scoped lang='scss'>
-@import "../index.scss";
+<style scoped lang="scss">
+@use '../index.scss';
 </style>