vue前端登录实现
登录功能实现步骤
安装依赖 确保项目已安装Vue.js和axios库。若未安装，可通过以下命令安装：
npm install vue axios创建登录组件
在src/components目录下创建Login.vue文件，包含表单模板、数据绑定及方法：
<template>
<form @submit.prevent="handleSubmit">
<input v-model="username" placeholder="用户名" />
<input v-model="password" type="password" placeholder="密码" />
<button type="submit">登录</button>
</form>
</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) {
alert('登录失败');
}
}
}
}
</script>配置路由
在src/router/index.js中设置登录路由：
import Login from '../components/Login.vue';
const routes = [
{
path: '/login',
name: 'Login',
component: Login
}
];API接口封装
创建src/api/auth.js封装登录请求：
import axios from 'axios';
export const login = (credentials) => {
return axios.post('/api/login', credentials);
};状态管理（可选）
若使用Vuex，可在store中管理用户状态：
// store/modules/auth.js
const actions = {
async login({ commit }, credentials) {
const response = await login(credentials);
commit('SET_TOKEN', response.data.token);
}
};安全注意事项
- 使用HTTPS协议传输数据
- 密码字段需在前端进行基础验证（如非空校验）
- 敏感信息避免存储在localStorage，考虑使用HttpOnly Cookie
- 后端应实现JWT或Session机制进行身份校验
扩展功能
- 添加验证码防止暴力破解
- 实现记住密码功能（需加密存储）
- 集成第三方登录（如OAuth2.0）
- 路由守卫拦截未认证访问
以上步骤提供了Vue前端登录的基础实现框架，具体细节需根据实际项目需求调整。
