vue登陆实现
实现Vue登录功能
创建登录表单组件
在Vue项目中创建一个Login.vue组件，包含用户名和密码输入框：
<template>
<div class="login-container">
<form @submit.prevent="handleLogin">
<input v-model="username" type="text" placeholder="用户名" required>
<input v-model="password" type="password" placeholder="密码" required>
<button type="submit">登录</button>
</form>
</div>
</template>
<script>
export default {
data() {
return {
username: '',
password: ''
}
},
methods: {
async handleLogin() {
try {
const response = await this.$axios.post('/api/login', {
username: this.username,
password: this.password
})
localStorage.setItem('token', response.data.token)
this.$router.push('/dashboard')
} catch (error) {
alert('登录失败')
}
}
}
}
</script>配置路由
在router/index.js中设置登录路由：
import Vue from 'vue'
import Router from 'vue-router'
import Login from '@/views/Login.vue'
Vue.use(Router)
export default new Router({
routes: [
{
path: '/login',
name: 'Login',
component: Login
}
]
})实现API请求
在main.js中配置axios：
import axios from 'axios'
import VueAxios from 'vue-axios'
Vue.use(VueAxios, axios)
axios.defaults.baseURL = 'http://your-api-domain.com'添加路由守卫
在router/index.js中添加全局前置守卫：
router.beforeEach((to, from, next) => {
const isAuthenticated = localStorage.getItem('token')
if (to.name !== 'Login' && !isAuthenticated) {
next({ name: 'Login' })
} else {
next()
}
})处理用户状态
创建auth.js管理用户状态：
export default {
isAuthenticated() {
return !!localStorage.getItem('token')
},
logout() {
localStorage.removeItem('token')
}
}后端接口示例
Node.js Express登录接口示例：
app.post('/api/login', (req, res) => {
const { username, password } = req.body
if (username === 'admin' && password === '123456') {
res.json({ token: 'generated-jwt-token' })
} else {
res.status(401).json({ error: 'Invalid credentials' })
}
})样式优化
为登录表单添加基础样式：
.login-container {
max-width: 400px;
margin: 0 auto;
padding: 20px;
}
input {
display: block;
width: 100%;
margin-bottom: 10px;
padding: 8px;
}
button {
width: 100%;
padding: 10px;
background-color: #42b983;
color: white;
border: none;
}
