vue实现登录主页
使用 Vue 实现登录与主页功能
安装 Vue 及相关依赖
确保已安装 Node.js 和 npm/yarn，通过以下命令创建 Vue 项目：
npm init vue@latest my-project
cd my-project
npm install安装路由和状态管理库（如 Vue Router 和 Pinia）：
npm install vue-router pinia配置路由
在 src/router/index.js 中配置登录和主页的路由：
import { createRouter, createWebHistory } from 'vue-router'
import Login from '../views/Login.vue'
import Home from '../views/Home.vue'
const routes = [
{ path: '/login', component: Login },
{ path: '/', component: Home, meta: { requiresAuth: true } }
]
const router = createRouter({
history: createWebHistory(),
routes
})
router.beforeEach((to, from, next) => {
const isAuthenticated = localStorage.getItem('token')
if (to.meta.requiresAuth && !isAuthenticated) {
next('/login')
} else {
next()
}
})
export default router创建登录组件
在 src/views/Login.vue 中实现登录表单：
<template>
<form @submit.prevent="handleLogin">
<input v-model="username" placeholder="用户名" />
<input v-model="password" type="password" placeholder="密码" />
<button type="submit">登录</button>
</form>
</template>
<script setup>
import { ref } from 'vue'
import { useRouter } from 'vue-router'
const username = ref('')
const password = ref('')
const router = useRouter()
const handleLogin = () => {
if (username.value && password.value) {
localStorage.setItem('token', 'dummy-token')
router.push('/')
}
}
</script>创建主页组件
在 src/views/Home.vue 中实现受保护的主页内容：
<template>
<div>
<h1>欢迎来到主页</h1>
<button @click="handleLogout">退出登录</button>
</div>
</template>
<script setup>
import { useRouter } from 'vue-router'
const router = useRouter()
const handleLogout = () => {
localStorage.removeItem('token')
router.push('/login')
}
</script>状态管理（可选）
使用 Pinia 管理登录状态（src/stores/auth.js）：
import { defineStore } from 'pinia'
export const useAuthStore = defineStore('auth', {
state: () => ({
isAuthenticated: !!localStorage.getItem('token')
}),
actions: {
login() {
this.isAuthenticated = true
},
logout() {
this.isAuthenticated = false
}
}
})集成到主应用
修改 src/main.js 初始化路由和状态管理：
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import { createPinia } from 'pinia'
const app = createApp(App)
app.use(router)
app.use(createPinia())
app.mount('#app')样式与布局
在 src/App.vue 中添加基础布局：
<template>
<router-view />
</template>关键点说明
- 路由守卫通过
beforeEach检查本地存储的 token 实现权限控制 - 登录成功后将 token 存入 localStorage 并跳转主页
- 退出登录时清除 token 并返回登录页
- 使用 Pinia 可集中管理认证状态（需在组件中调用 store 方法）
