初始化

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

@@ -0,0 +1,158 @@
+<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" v-show="false">
+            <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'
+import forge from 'node-forge'
+
+const authStore = useAuthStore()
+const router = useRouter()
+const userStore = useUserStore()
+const tabsStore = useTabsStore()
+const keepAliveStore = useKeepAliveStore()
+
+const dictStore = useDictStore()
+let publicKey: any = null
+
+type FormInstance = InstanceType<typeof ElForm>
+const loginFormRef = ref<FormInstance>()
+const loginRules = reactive({
+    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
+})
+
+// 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)))
+            )
+
+            // 1.执行登录接口
+            const { data } = await loginApi({
+                username: forge.util.encode64(loginForm.username),
+                password: encryptPassword(loginForm.password)
+            })
+            ElNotification({
+                title: getTimeState(),
+                message: '登录成功',
+                type: 'success',
+                duration: 3000
+            })
+            userStore.setAccessToken(data.accessToken)
+            userStore.setRefreshToken(data.refreshToken)
+            userStore.setUserInfo(data.userInfo)
+            if (loginForm.checked) {
+                userStore.setExp(Date.now() + 1000 * 60 * 60 * 24 * 30)
+            }
+            // 设置激活信息
+            await authStore.setActivateInfo()
+            const response = await getDictList()
+            const dictData = response.data as unknown as Dict[]
+            await dictStore.initDictData(dictData)
+            // 2.添加动态路由
+            await initDynamicRouter()
+
+            // 3.清空 tabs、keepAlive 数据
+            await tabsStore.setTabs([])
+            await keepAliveStore.setKeepAliveName([])
+            // 登录默认不显示菜单和导航栏
+            await authStore.setShowMenu()
+            // 跳转到首页
+            await router.push(HOME_URL)
+        } finally {
+            loading.value = false
+        }
+    })
+}
+
+// resetForm
+const resetForm = (formEl: FormInstance | undefined) => {
+    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)
+        }
+    }
+})
+
+const encryptPassword = (password: string) => {
+    const encrypted = publicKey.encrypt(password, 'RSAES-PKCS1-V1_5')
+    // 将加密后的数据转换为base64格式以便传输
+    return forge.util.encode64(encrypted)
+}
+</script>
+
+<style scoped lang="scss">
+@use '../index.scss';
+</style>