pqs-9100_client/frontend/src/views/login/components/LoginForm.vue

<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>
</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()
const isAutoLogin = ref(false)
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 {
      if (!isAutoLogin.value) {
        let {data: publicKeyBase64}: { data: string } = await getPublicKey(loginForm.username, loginForm.checked)
        //将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: isAutoLogin.value ? loginForm.password : encryptPassword(loginForm.password),
        checked: loginForm.checked
      })
      if (loginForm.checked) {
        localStorage.setItem("loginInfo", JSON.stringify({
          username: forge.util.encode64(loginForm.username),
          password: isAutoLogin.value ? loginForm.password : encryptPassword(loginForm.password),
          exp: Date.now() + 1000 * 60 * 60 * 24 * 30
        }))
      } else {
        localStorage.removeItem("loginInfo")
      }
      userStore.setAccessToken(data.accessToken)
      userStore.setRefreshToken(data.refreshToken)
      userStore.setUserInfo(data.userInfo)
      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([])

      // 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()
}

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);
}

onBeforeMount(async () => {
  let loginInfoJSON = localStorage.getItem("loginInfo")
  if (loginInfoJSON) {
    const loginInfo = JSON.parse(loginInfoJSON)
    if (loginInfo.exp < Date.now()) {
      localStorage.removeItem("loginInfo")
    } else {
      isAutoLogin.value = true
      loginForm.username = forge.util.decode64(loginInfo.username)
      loginForm.password = loginInfo.password
      loginForm.checked = true
    }
  }
})
</script>

<style scoped lang='scss'>
@import "../index.scss";
</style>