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