vue连接实现登录功能
安装必要依赖
确保项目已安装 Vue.js 和 Axios（用于 HTTP 请求）。通过以下命令安装 Axios：
npm install axios创建登录组件
在 Vue 组件中，设计登录表单，包含用户名和密码输入框，以及提交按钮。示例代码如下：
<template>
<div>
<input v-model="username" placeholder="用户名" />
<input v-model="password" type="password" placeholder="密码" />
<button @click="handleLogin">登录</button>
</div>
</template>
<script>
export default {
data() {
return {
username: '',
password: ''
}
},
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) {
console.error('登录失败:', error);
}
}
}
}
</script>配置后端接口
确保后端提供 /api/login 接口，接收用户名和密码，验证后返回 token 或错误信息。接口需支持跨域请求（CORS）。
处理登录状态
登录成功后，将 token 存储到 localStorage 或 Vuex 中，用于后续请求的鉴权。示例中使用了 localStorage。
路由跳转
通过 Vue Router 实现登录后的页面跳转。在 router/index.js 中配置路由：
const routes = [
{ path: '/login', component: Login },
{ path: '/dashboard', component: Dashboard, meta: { requiresAuth: true } }
]添加路由守卫
在路由全局守卫中检查登录状态，未登录用户访问受限路由时重定向到登录页：
router.beforeEach((to, from, next) => {
const token = localStorage.getItem('token');
if (to.meta.requiresAuth && !token) {
next('/login');
} else {
next();
}
});错误处理
在 Axios 请求中捕获错误，提示用户登录失败原因。可根据后端返回的状态码（如 401、403）细化处理逻辑。
安全建议
- 使用 HTTPS 传输敏感数据。
- 后端应对密码进行哈希存储（如 bcrypt）。
- 前端可通过环境变量管理 API 基础路径，避免硬编码。
