vue js实现登录
Vue.js 登录功能实现
依赖安装 确保项目已安装 Vue.js 和必要的依赖库（如 Vue Router、Axios）。通过以下命令安装：
npm install vue-router axios路由配置
在 router/index.js 中配置登录路由：
import { createRouter, createWebHistory } from 'vue-router';
import Login from '../views/Login.vue';
const routes = [
{
path: '/login',
name: 'Login',
component: Login
}
];
const router = createRouter({
history: createWebHistory(),
routes
});
export default router;登录页面组件
创建 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>
<p v-if="errorMessage" class="error">{{ errorMessage }}</p>
</div>
</template>
<script>
import axios from 'axios';
export default {
data() {
return {
username: '',
password: '',
errorMessage: ''
};
},
methods: {
async handleLogin() {
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) {
this.errorMessage = '登录失败，请检查凭证';
}
}
}
};
</script>
<style scoped>
.login-container {
max-width: 300px;
margin: 0 auto;
}
.error {
color: red;
}
</style>API 请求处理
后端需提供 /api/login 接口接收 POST 请求。示例使用 Axios 发送请求，需根据实际 API 调整 URL 和参数。
状态管理（可选） 对于复杂应用，可使用 Vuex 或 Pinia 管理登录状态：
// Pinia 示例 (stores/auth.js)
import { defineStore } from 'pinia';
export const useAuthStore = defineStore('auth', {
state: () => ({
isAuthenticated: false,
user: null
}),
actions: {
login(credentials) {
return axios.post('/api/login', credentials)
.then(response => {
this.isAuthenticated = true;
this.user = response.data.user;
localStorage.setItem('token', response.data.token);
});
}
}
});路由守卫
在 router/index.js 中添加全局前置守卫，限制未登录访问：
router.beforeEach((to, from, next) => {
const isAuthenticated = localStorage.getItem('token');
if (to.name !== 'Login' && !isAuthenticated) {
next({ name: 'Login' });
} else {
next();
}
});表单验证增强 可引入 Vuelidate 或自定义验证逻辑：
// 示例：简单验证
methods: {
validateForm() {
return this.username.length > 3 && this.password.length > 6;
},
handleLogin() {
if (!this.validateForm()) {
this.errorMessage = '用户名或密码不符合要求';
return;
}
// 继续登录逻辑
}
}响应式设计 通过 CSS 媒体查询优化移动端显示：
@media (max-width: 600px) {
.login-container {
padding: 20px;
}
}安全注意事项
- 使用 HTTPS 传输数据
- 后端应对密码进行哈希处理
- 考虑实现 CSRF 保护
- 敏感操作需二次验证
