vue3实现登录
使用 Vue 3 实现登录功能
创建登录表单组件
在 Login.vue 组件中构建登录表单，包含用户名和密码输入框以及提交按钮。
<template>
<form @submit.prevent="handleSubmit">
<input v-model="username" type="text" placeholder="用户名" required />
<input v-model="password" type="password" placeholder="密码" required />
<button type="submit">登录</button>
</form>
</template>
<script setup>
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import { useAuthStore } from '@/stores/auth'
const username = ref('')
const password = ref('')
const router = useRouter()
const authStore = useAuthStore()
const handleSubmit = async () => {
try {
await authStore.login(username.value, password.value)
router.push('/dashboard')
} catch (error) {
alert('登录失败: ' + error.message)
}
}
</script>配置 Pinia 状态管理
创建 auth store 管理用户认证状态和登录逻辑。
// stores/auth.js
import { defineStore } from 'pinia'
import { ref } from 'vue'
import { loginApi } from '@/api/auth'
export const useAuthStore = defineStore('auth', () => {
const user = ref(null)
const isAuthenticated = ref(false)
const login = async (username, password) => {
const response = await loginApi(username, password)
user.value = response.data.user
isAuthenticated.value = true
localStorage.setItem('token', response.data.token)
}
const logout = () => {
user.value = null
isAuthenticated.value = false
localStorage.removeItem('token')
}
return { user, isAuthenticated, login, logout }
})设置路由守卫
在路由配置中添加导航守卫保护需要认证的路由。
// router/index.js
import { createRouter, createWebHistory } from 'vue-router'
import { useAuthStore } from '@/stores/auth'
const router = createRouter({
history: createWebHistory(),
routes: [
{ path: '/login', component: () => import('@/views/Login.vue') },
{
path: '/dashboard',
component: () => import('@/views/Dashboard.vue'),
meta: { requiresAuth: true }
}
]
})
router.beforeEach((to, from, next) => {
const authStore = useAuthStore()
if (to.meta.requiresAuth && !authStore.isAuthenticated) {
next('/login')
} else {
next()
}
})
export default router实现 API 请求
创建 API 服务处理登录请求。
// api/auth.js
import axios from 'axios'
export const loginApi = (username, password) => {
return axios.post('/api/login', { username, password })
}添加全局请求拦截器
在 main.js 中设置 axios 拦截器自动添加认证 token。
// main.js
import axios from 'axios'
axios.interceptors.request.use(config => {
const token = localStorage.getItem('token')
if (token) {
config.headers.Authorization = `Bearer ${token}`
}
return config
})响应式导航菜单
根据认证状态显示不同导航项。
<template>
<nav>
<router-link to="/">首页</router-link>
<router-link v-if="!isAuthenticated" to="/login">登录</router-link>
<button v-else @click="logout">退出</button>
</nav>
</template>
<script setup>
import { storeToRefs } from 'pinia'
import { useAuthStore } from '@/stores/auth'
const authStore = useAuthStore()
const { isAuthenticated } = storeToRefs(authStore)
const { logout } = authStore
</script>这些步骤组合起来可以构建完整的 Vue 3 登录系统，包括表单处理、状态管理、路由保护和 API 集成。
