Vue3+Vite+TypeScript+Element Plus开发-08.登录设计

系列文档目录

Vue3+Vite+TypeScript安装

Element Plus安装与配置

主页设计与router配置

静态菜单设计

Pinia引入

Header响应式菜单缩展

Mockjs引用与Axios封装

登录设计

登录成功跳转主页

多用户动态加载菜单

文章目录

系列文档目录

文章目录

前言

一、登录mock资料模拟

二、界面设计

三、路由定义

四、运行效果

五、登录验证与多用户资料模拟

后续

前言

本章节的核心内容包括：界面设计的优化、Mock.js 模拟用户登录 API 数据的生成，以及登录验证和多用户登录功能的实现。

一、登录mock资料模拟

1.在mockData下新建loginData.ts

// src/mock/mockData/loginData.ts
import Mock from 'mockjs';
import { Document, Setting } from '@element-plus/icons-vue'; // 假设你使用的是 Element Plus 的图标// 模拟登录数据
const loginData = Mock.mock({data: {"status_code": 200,"status": "success","message": "Operation successful.","data": {"api_key": "Test","username": "admin","token_key": "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VyX2lkIjoicTEyMzQ1NjdBYSIsInVzZXJuYW1lIjoiYWRtaW4iLCJyb2xlIjoiYWRtaW4iLCJlbWFpbCI6InVzZXJAZXhhbXBsZS5jb20iLCJleHAiOjE3NDQ2MTQ3MjR9.ZN1CwvBgSa7hSTjvAdduEiJjxlQpxqQp15tM7TEl4xc","role": "admin","email": "user@example.com"}
},
});export default loginData;

2.修改mock文件

新增login的api模拟应用

// src/mock/index.ts
import Mock from 'mockjs';
import menuData from '@/mock/mockData/menuData';
import loginData from '@/mock/mockData/loginData' ;Mock.mock(/menu/, 'get', (req: any) => {return menuData.data;
});Mock.mock(/login/, 'post', (req: any) => {return loginData.data;
});

二、界面设计

在src/views下新建文件login.vue

<template><div class="login-container"><el-card class="box-card"><template #header><span>登录</span></template><el-form :model="loginForm" :rules="rules" ref="loginFormRef" label-width="100px" class="demo-loginForm"><el-form-item label="用户名" prop="username"><el-input v-model="loginForm.username"></el-input></el-form-item><el-form-item label="密码" prop="password"><el-input type="password" v-model="loginForm.password" show-password></el-input></el-form-item><el-form-item><el-button type="primary" @click="submitForm">登录</el-button><el-button @click="resetForm">重置</el-button></el-form-item></el-form></el-card></div></template><script lang="ts" setup>import { reactive, ref } from 'vue';import { ElForm, ElFormItem, ElInput, ElButton, ElCard, ElMessage } from 'element-plus';import type { FormInstance, FormRules } from 'element-plus';import { login } from '@/api/user';const loginForm = reactive({username: '',password: ''});const rules: FormRules = {username: [{ required: true, message: '请输入用户名', trigger: 'blur' }],password: [{ required: true, message: '请输入密码', trigger: 'blur' }]};const loginFormRef = ref<FormInstance | null>(null);// 封装登录请求处理逻辑// 定义 API 返回的数据结构interface LoginResponse {status_code: number;status: string;message?: string;data?: {api_key: string;username: string;token_key: string;role: string;email: string;};}const fetchLoginData = async () => {try {const responseData: LoginResponse = await login(loginForm); // 假设 login 返回的是 LoginResponseif (responseData.status_code === 200 && responseData.status === 'success') {ElMessage.success('登录成功!');} else {ElMessage.error(`登录失败: ${responseData.message || '未知错误'}`);console.error('登录失败:', responseData);}} catch (error) {ElMessage.error('登录请求失败，请稍后再试');}
};const submitForm = () => {if (!loginFormRef.value) return;loginFormRef.value.validate((valid) => {if (valid) {fetchLoginData();} else {console.log('验证失败!');ElMessage.error('验证失败!');}});};const resetForm = () => {if (!loginFormRef.value) return;loginFormRef.value.resetFields();};</script><style scoped>.login-container {display: flex;justify-content: center;align-items: center;height: 100vh;background-color: #f0f2f5;}.box-card {width: 480px;}</style>

三、路由定义

1.修改路由文件（views\router\index.ts）

2.重点增加 RouteRecordRaw与增加login路由

3.完整代码

import { createRouter, createWebHistory, RouteRecordRaw } from 'vue-router';
import Main from '@/views/Main.vue'; //
import Home from '@/views/Home.vue';
import UserInfo from '@/views/SysSettings/UserInfo.vue';
import AccountSetting from '@/views/SysSettings/AccountSetting.vue';
import Login from '@/views/login.vue';// 定义路由配置
const routes: RouteRecordRaw[] = [{path: '/',name: 'main',component: Main,children: [{path: 'home',name: 'home',component: Home,},{path: 'UserInfo',name: 'UserInfo',component: UserInfo,},{path: 'AccountSetting',name: 'AccountSetting',component: AccountSetting,},],},{path: '/login',name: 'login',component: Login,},
];// 创建路由器
const router = createRouter({history: createWebHistory(),routes, // 使用已定义的路由配置
});export default router;

四、运行效果

输入网址：http://localhost:5173/login，切记要加上/login

此时随便输入用户名与密码都可以正确登录，接下来模拟多用户与密码错误登录。

五、登录验证与多用户资料模拟

1、修改mockData登录模拟数据【src/mock/mockData/loginData.ts】

增加用户名与密码验证与多用户返回不同信息

// src/mock/mockData/loginData.ts
import Mock from 'mockjs';
import { Document, Setting } from '@element-plus/icons-vue'; // 假设你使用的是 Element Plus 的图标// 模拟登录数据
/*
const loginData = Mock.mock({data: {"status_code": 200,"status": "success","message": "Operation successful.","data": {"api_key": "Test","username": "admin","token_key": "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VyX2lkIjoicTEyMzQ1NjdBYSIsInVzZXJuYW1lIjoiYWRtaW4iLCJyb2xlIjoiYWRtaW4iLCJlbWFpbCI6InVzZXJAZXhhbXBsZS5jb20iLCJleHAiOjE3NDQ2MTQ3MjR9.ZN1CwvBgSa7hSTjvAdduEiJjxlQpxqQp15tM7TEl4xc","role": "admin","email": "user@example.com"}
},
});export default loginData;
*/// 动态生成登录数据
export default (data: any) => {// 解析传入的 data 参数const { username, password } = data;// 根据用户名和密码生成不同的响应if (username === 'admin' && password === 'admin') {return Mock.mock({status_code: 200,status: 'success',message: 'Operation successful.',data: {api_key: 'Test',username: 'admin',token_key: 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VyX2lkIjoicTEyMzQ1NjdBYSIsInVzZXJuYW1lIjoiYWRtaW4iLCJyb2xlIjoiYWRtaW4iLCJlbWFpbCI6InVzZXJAZXhhbXBsZS5jb20iLCJleHAiOjE3NDQ2MTQ3MjR9.ZN1CwvBgSa7hSTjvAdduEiJjxlQpxqQp15tM7TEl4xc',role: 'admin',email: 'admin@example.com',},});} else if (username === 'user' && password === 'password') {return Mock.mock({status_code: 200,status: 'success',message: 'Operation successful.',data: {api_key: 'TestUser',username: 'user',token_key: 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VyX2lkIjoicTEyMzQ1NjdBYSIsInVzZXJuYW1lIjoidXNlciIsInJvbGUiOiJ1c2VyIiwiZW1haWwiOiJ1c2VyQGV4YW1wbGUuY29tIiwiZXhwIjoxNzQ0NjE0NzI0fQ.ZN1CwvBgSa7hSTjvAdduEiJjxlQpxqQp15tM7TEl4xc',role: 'user',email: 'user@example.com',},});} else {return Mock.mock({status_code: 401,status: 'fail',message: 'Invalid username or password.',data: null,});}
};

2.修改mock api文件

增加了获取登录账号与密码信息传输

// src/mock/index.ts
import Mock from 'mockjs';
import menuData from '@/mock/mockData/menuData';
import loginData from '@/mock/mockData/loginData' ;Mock.mock(/menu/, 'get', (req: any) => {return menuData.data;
});/*
Mock.mock(/login/, 'post', (req: any) => {return loginData.data;
});
*/
Mock.mock(/\/login/, (options) => {const { body } = options;const data = JSON.parse(body); // 解析请求体中的数据return loginData(data); // 调用动态生成的登录数据函数
});