vue登录的实现
实现Vue登录功能
安装必要依赖
确保项目中已安装vue-router和axios，用于路由管理和HTTP请求。通过npm或yarn安装：
npm install vue-router axios创建登录组件
在src/components目录下创建Login.vue文件，包含表单和提交逻辑：
<template>
<div>
<form @submit.prevent="handleSubmit">
<input v-model="username" placeholder="用户名" />
<input v-model="password" type="password" placeholder="密码" />
<button type="submit">登录</button>
</form>
</div>
</template>
<script>
export default {
data() {
return {
username: '',
password: ''
}
},
methods: {
async handleSubmit() {
try {
const response = await axios.post('/api/login', {
username: this.username,
password: this.password
})
localStorage.setItem('token', response.data.token)
this.$router.push('/dashboard')
} catch (error) {
console.error('登录失败:', error)
}
}
}
}
</script>配置路由
在src/router/index.js中设置登录路由：
import Vue from 'vue'
import Router from 'vue-router'
import Login from '@/components/Login.vue'
import Dashboard from '@/components/Dashboard.vue'
Vue.use(Router)
export default new Router({
routes: [
{ path: '/login', component: Login },
{ path: '/dashboard', component: Dashboard, meta: { requiresAuth: true } }
]
})添加路由守卫
在src/main.js或路由配置文件中添加全局前置守卫：
router.beforeEach((to, from, next) => {
const isAuthenticated = localStorage.getItem('token')
if (to.matched.some(record => record.meta.requiresAuth) && !isAuthenticated) {
next('/login')
} else {
next()
}
})后端API交互
通过axios与后端接口通信，需创建src/api/auth.js封装请求：
import axios from 'axios'
export default {
login(credentials) {
return axios.post('/api/login', credentials)
}
}样式优化 可添加基础样式增强用户体验：
form {
max-width: 300px;
margin: 0 auto;
}
input {
display: block;
margin: 10px 0;
width: 100%;
}表单验证
使用vee-validate或手动验证增强安全性：
methods: {
validateForm() {
return this.username.length > 0 && this.password.length >= 6
}
}
