系列文档目录
文章目录
目录
前言
前一章节中，构建了一个用户登录界面、Mock.js 模拟用户登录 API 数据的生成，以及登录验证和多用户登录功能的实现。
本章节中，将介绍如何安全地存储用户信息，以及如何通过Pinia状态管理工具来管理用户状态，详细说明如何实现页面跳转逻辑，确保用户在登录成功后能够进入主页面。
登录成功跳转
1.修改路由
在本地开发环境中，尝试访问地址 http://localhost:5173/main 时，页面无法正常显示。通过对路由配置进行调整，以便当用户访问 /main 路径时，页面不仅能够正确加载，而且能够自动重定向至 /home 页面，调整后确保用户成功登录能够跳转到Home页。
修改重点内容：
redirect: { name: 'home' }, // 默认重定向到 home 子路由
{
path: '/main', // 如果确实需要 /main 路径
redirect: { name: 'home' }, // 仅保留重定向规则
},完整代码：
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,
redirect: { name: 'home' }, // 默认重定向到 home 子路由
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,
},
{
path: '/main', // 如果确实需要 /main 路径
redirect: { name: 'home' }, // 仅保留重定向规则
},
];
// 创建路由器
const router = createRouter({
history: createWebHistory(),
routes, // 使用已定义的路由配置
});
export default router;2.修改stores资料
通过 Pinia 提供的存储机制，用户的关键信息，如身份验证令牌、用户名等，将被安全地保存，以便在用户会话之间保持状态的连续性。
在 Pinia 状态管理库中，通过定义 actions 来管理用户信息的存储逻辑。这些 actions 将负责处理用户数据的加载、更新和保存操作，确保用户在应用中的信息能够被存储与获取，并在需要时被正确应用。通过精心设计的 actions ，实现用户状态的无缝管理和跨会话的数据保持，从而提升用户体验并确保应用的响应性和可靠性。
// src/stores/index.ts
import { defineStore } from 'pinia';
// 定义公共 store
export const useAllDataStore = defineStore('useAllData', {
// 定义状态
state: () => ({
isCollapse: false, // 定义初始状态
username: '',
token_key: '',
}),
// 定义 actions
actions: {
// 设置用户名
setUsername(username: string) {
this.username = username;
},
// 获取用户名
getUsername(): string {
return this.username;
},
// 设置 token_key
setTokenKey(token_key: string) {
this.token_key = token_key;
},
// 获取 token_key
getTokenKey(): string {
return this.token_key;
},
},
});3.修改登录
在用户登录成功后，用户信息和Token Key资料得到进行存储，以便在后续的应用使用中能够快速且安全地访问这些信息。
store.setUsername(responseData.data?.username || '');
store.setTokenKey( responseData.data?.token_key || '');
router.push('/main');完整代码
<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';
import { useAllDataStore } from '@/stores';
import { useRouter } from 'vue-router';
const router = useRouter();
const loginForm = reactive({
username: '',
password: ''
});
const rules: FormRules = {
username: [
{ required: true, message: '请输入用户名', trigger: 'blur' }
],
password: [
{ required: true, message: '请输入密码', trigger: 'blur' }
]
};
const store = useAllDataStore();
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 返回的是 LoginResponse
if (responseData.status_code === 200 && responseData.status === 'success') {
store.setUsername(responseData.data?.username || '');
store.setTokenKey( responseData.data?.token_key || '');
router.push('/main');
} else {
ElMessage.error(`登录失败: ${responseData.message || '未知错误'}`);
}
} 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>4.运行效果
输入 http://localhost:5173/login后，输入账号与密码点击确认。
确认后自动跳转到/home，说明自动调整成功
后续
在接下来的章节中，将深入探讨如何根据用户的权限和角色动态加载个性化的菜单。这一功能将允许系统根据用户的特定需求和访问级别定制菜单项，从而增强应用的灵活性和可扩展性