vue 实现简单登陆
Vue 实现简单登录功能
创建 Vue 项目
使用 Vue CLI 创建一个新项目：
vue create login-demo选择默认配置或手动配置（推荐包含 Vue Router 和 Vuex）。
项目结构
src/
├── components/
│ └── LoginForm.vue
├── views/
│ ├── Login.vue
│ └── Home.vue
├── router/
│ └── index.js
├── store/
│ └── index.js
└── App.vue登录表单组件
在 components/LoginForm.vue 中：
<template>
<form @submit.prevent="handleSubmit">
<input v-model="username" placeholder="用户名" required>
<input v-model="password" type="password" placeholder="密码" required>
<button type="submit">登录</button>
</form>
</template>
<script>
export default {
data() {
return {
username: '',
password: ''
}
},
methods: {
handleSubmit() {
this.$emit('login', {
username: this.username,
password: this.password
})
}
}
}
</script>登录页面
在 views/Login.vue 中：
<template>
<div>
<h1>登录</h1>
<LoginForm @login="handleLogin" />
<p v-if="error" class="error">{{ error }}</p>
</div>
</template>
<script>
import LoginForm from '@/components/LoginForm.vue'
export default {
components: { LoginForm },
data() {
return {
error: null
}
},
methods: {
handleLogin(credentials) {
this.$store.dispatch('login', credentials)
.then(() => {
this.$router.push('/home')
})
.catch(error => {
this.error = error.message
})
}
}
}
</script>Vuex 状态管理
在 store/index.js 中：
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
state: {
isAuthenticated: false,
user: null
},
mutations: {
SET_AUTH(state, payload) {
state.isAuthenticated = true
state.user = payload.user
}
},
actions: {
login({ commit }, credentials) {
return new Promise((resolve, reject) => {
// 模拟 API 调用
if (credentials.username === 'admin' && credentials.password === '123456') {
commit('SET_AUTH', { user: credentials.username })
resolve()
} else {
reject(new Error('用户名或密码错误'))
}
})
}
}
})路由配置
在 router/index.js 中：
import Vue from 'vue'
import Router from 'vue-router'
import Login from '../views/Login.vue'
import Home from '../views/Home.vue'
Vue.use(Router)
export default new Router({
routes: [
{
path: '/login',
name: 'Login',
component: Login
},
{
path: '/home',
name: 'Home',
component: Home,
meta: { requiresAuth: true }
},
{
path: '*',
redirect: '/login'
}
]
})路由守卫
在 main.js 中添加全局前置守卫：
import router from './router'
import store from './store'
router.beforeEach((to, from, next) => {
if (to.matched.some(record => record.meta.requiresAuth)) {
if (!store.state.isAuthenticated) {
next('/login')
} else {
next()
}
} else {
next()
}
})主页面
在 views/Home.vue 中：
<template>
<div>
<h1>欢迎, {{ $store.state.user }}</h1>
<button @click="logout">退出</button>
</div>
</template>
<script>
export default {
methods: {
logout() {
this.$store.commit('SET_AUTH', { user: null })
this.$store.state.isAuthenticated = false
this.$router.push('/login')
}
}
}
</script>样式增强
可以添加基础样式到 App.vue：
<style>
.error {
color: red;
}
input {
display: block;
margin: 10px 0;
padding: 8px;
}
button {
padding: 8px 16px;
}
</style>运行项目
npm run serve访问 http://localhost:8080/login 测试登录功能，使用用户名 admin 和密码 123456 可以成功登录并跳转到主页。
