修复按回车键不进行登录问题
This commit is contained in:
@@ -34,17 +34,16 @@
|
||||
|
||||
<el-form-item prop="password">
|
||||
<div class="input-prefix">KEY</div>
|
||||
<el-input v-model="loginForm.password" type="password" placeholder="访问密钥" show-password
|
||||
class="ark-input" />
|
||||
<el-input v-model="loginForm.password" type="password" placeholder="访问密钥" show-password class="ark-input"
|
||||
@keyup.enter="handleLogin" />
|
||||
</el-form-item>
|
||||
|
||||
<div class="options-bar">
|
||||
<el-checkbox v-model="rememberMe">保持认证状态</el-checkbox>
|
||||
<el-checkbox v-model="rememberMe" @keyup.enter="handleLogin">保持认证状态</el-checkbox>
|
||||
</div>
|
||||
|
||||
<!--loading为true时候,会转圈圈-->
|
||||
<el-button type="primary" class="ark-btn" @click="handleLogin" :loading="loading">
|
||||
|
||||
<div class="btn-content">
|
||||
<span class="main-btn-text">INITIALIZE / 启动</span>
|
||||
</div>
|
||||
@@ -61,23 +60,22 @@
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, reactive } from 'vue';
|
||||
import { DataBoard } from '@element-plus/icons-vue';
|
||||
import { ElMessage } from 'element-plus';
|
||||
import { userApi } from '@/api/ticket';
|
||||
import { useRouter } from 'vue-router';
|
||||
import { ref, reactive } from "vue";
|
||||
import { DataBoard } from "@element-plus/icons-vue";
|
||||
import { ElMessage } from "element-plus";
|
||||
import { userApi } from "@/api/ticket";
|
||||
import { useRouter } from "vue-router";
|
||||
|
||||
const router = useRouter();
|
||||
|
||||
|
||||
const loginForm = reactive({ username: '', password: '' });
|
||||
const loginForm = reactive({ username: "", password: "" });
|
||||
const rememberMe = ref(false);
|
||||
const loading = ref(false);
|
||||
const loginFormRef = ref(null);
|
||||
|
||||
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 handleLogin = async () => {
|
||||
@@ -100,39 +98,39 @@ const handleLogin = async () => {
|
||||
// --- 核心逻辑开始 ---
|
||||
if (rememberMe.value) {
|
||||
// 勾选了:存入 localStorage,实现持久化
|
||||
localStorage.setItem('token', token);
|
||||
localStorage.setItem('user_info', userInfo);
|
||||
localStorage.setItem("token", token);
|
||||
localStorage.setItem("user_info", userInfo);
|
||||
} else {
|
||||
// 没勾选:存入 sessionStorage,关闭标签页即失效
|
||||
sessionStorage.setItem('token', token);
|
||||
sessionStorage.setItem('user_info', userInfo);
|
||||
sessionStorage.setItem("token", token);
|
||||
sessionStorage.setItem("user_info", userInfo);
|
||||
}
|
||||
// --- 核心逻辑结束 ---
|
||||
|
||||
ElMessage.success('身份验证通过,方舟系统加载中...');
|
||||
ElMessage.success("身份验证通过,方舟系统加载中...");
|
||||
|
||||
// 3. 根据角色执行路由跳转
|
||||
setTimeout(() => {
|
||||
switch (role) {
|
||||
case 'admin':
|
||||
router.push('/'); // 管理员跳转至主页
|
||||
case "admin":
|
||||
router.push("/"); // 管理员跳转至主页
|
||||
break;
|
||||
case 'user':
|
||||
router.push('/user'); // 跳转至 UserView (请确保路由配置中有此路径)
|
||||
case "user":
|
||||
router.push("/user"); // 跳转至 UserView (请确保路由配置中有此路径)
|
||||
break;
|
||||
case 'client':
|
||||
router.push('/client'); // 跳转至 ClientView (请确保路由配置中有此路径)
|
||||
case "client":
|
||||
router.push("/client"); // 跳转至 ClientView (请确保路由配置中有此路径)
|
||||
break;
|
||||
default:
|
||||
ElMessage.warning('未识别的角色权限,请联系管理员');
|
||||
ElMessage.warning("未识别的角色权限,请联系管理员");
|
||||
break;
|
||||
}
|
||||
}, 1000);
|
||||
} else {
|
||||
ElMessage.error(res.message || '登录失败');
|
||||
ElMessage.error(res.message || "登录失败");
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Login Error:', error);
|
||||
console.error("Login Error:", error);
|
||||
} finally {
|
||||
loading.value = false;
|
||||
}
|
||||
@@ -155,8 +153,7 @@ const handleLogin = async () => {
|
||||
.grid-bg {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background-image:
|
||||
linear-gradient(rgba(0, 242, 255, 0.05) 1px, transparent 1px),
|
||||
background-image: linear-gradient(rgba(0, 242, 255, 0.05) 1px, transparent 1px),
|
||||
linear-gradient(90deg, rgba(0, 242, 255, 0.05) 1px, transparent 1px);
|
||||
background-size: 40px 40px;
|
||||
mask-image: radial-gradient(circle at center, black, transparent 80%);
|
||||
@@ -347,7 +344,6 @@ const handleLogin = async () => {
|
||||
filter: brightness(2);
|
||||
}
|
||||
|
||||
|
||||
/* 1. 核心修复:禁止卡片内非交互元素的文本选中 */
|
||||
.ark-card,
|
||||
.card-header,
|
||||
|
||||
Reference in New Issue
Block a user