十、vue3后台项目系列——登录页面的搭建
一、前言
需要打开登录页面的场景：
1.第一次访问后台
2.token过期了，需要重新登录
3.用户主动退出
登录的流程可以分为登录前，登录时，登录后：
登录前：主要做的判断是token，如果之前登录过了，则再进入登录页面时，则会进行路由重定向到首页，如果没有登录或者是说登录过期了，则token无效，就要回到登录页面进行重新登录，获取最新的token。
登录时：主要是页面逻辑判断，也就是交互效果、表单验证的作动。
登录后：当正常完成登录之后，应该进行页面跳转，有俩种情况，一种是由登录页面跳转到首页，一种是在别的页面浏览到别的页面，提醒需要登录，这时候，应该在登录之后重新跳转回改页面。
核心是在跳到登录页面时，记录、传入需要重定向的页面。
二、参考登录页面代码
<template><div class="login-container"><el-card class="login-card"><div class="card-header"><h2 class="title">欢迎登录</h2><p class="subtitle">使用您的账号登录系统</p></div><el-form ref="loginFormRef" :model="loginForm" :rules="loginRules" label-position="top"><el-form-item prop="username"><el-inputref="usernameInputRef"v-model="loginForm.username"placeholder="请输入用户名":prefix-icon="User"clearable/></el-form-item><el-form-item prop="password"><el-inputv-model="loginForm.password":type="passwordType"placeholder="请输入密码":prefix-icon="Lock"show-password@keyup.enter="handleLogin"/></el-form-item><el-form-item><el-buttontype="primary":loading="loading"class="login-button"@click="handleLogin">登录</el-button></el-form-item></el-form></el-card></div>
</template><script setup>
import { ref, reactive,onMounted } from 'vue'
import { useUserStore } from '@/store'
import { User, Lock } from '@element-plus/icons-vue'
// 在组件中导入 useRouter
import { useRouter } from 'vue-router'
const router = useRouter()const userStore = useUserStore()const loginFormRef = ref(null)
const usernameInputRef = ref(null)
const loading = ref(false)
const passwordType = ref('password')const loginForm = reactive({username: '',password: ''
})// 在组件挂载后自动聚焦
onMounted(() => {if (usernameInputRef.value) {usernameInputRef.value.focus()}
})// 表单校验规则
const loginRules = reactive({username: [{ required: true, message: '请输入用户名', trigger: 'blur' },{ min: 3, max: 20, message: '用户名长度在 3 到 20 个字符', trigger: 'blur' }],password: [{ required: true, message: '请输入密码', trigger: 'blur' },{ min: 6, message: '密码长度不能少于6位', trigger: 'blur' }]
})// 登录事件
const handleLogin = async () => {try {loading.value = trueawait loginFormRef.value.validate()// 登录接口,更新登录状态await userStore.userLogin(loginForm)const redirectPath = router.currentRoute.value.query.redirect || '/'router.push(redirectPath) // 有则跳转到指定页面，无则跳转到首页} catch (error) {console.error(error)} finally {loading.value = false}
}
</script><style lang="scss" scoped>
@use "@/styles/mixin.scss" as *;
$bg:#9bbbe5;.login-container {@include flex-center;min-height: 100vh;background-color: $bg;.login-card {width: 400px;padding: 20px;box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);border-radius: 10px;.card-header {text-align: center;margin-bottom: 24px;.title {font-size: 28px;font-weight: bold;color: #333;margin-bottom: 8px;}.subtitle {font-size: 14px;color: #999;}}.login-button {width: 100%;height: 44px;font-size: 16px;}}
}
</style>