使用vue实现登录
使用 Vue 实现登录功能
创建 Vue 项目
通过 Vue CLI 创建一个新项目：
vue create login-demo
cd login-demo安装必要的依赖（如 Axios 用于 HTTP 请求）：
npm install axios设计登录表单
在 src/components/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="error" class="error">{{ error }}</p>
</div>
</template>
<script>
export default {
data() {
return {
username: "",
password: "",
error: "",
};
},
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 (err) {
this.error = "用户名或密码错误";
}
},
},
};
</script>
<style scoped>
.login-container {
max-width: 300px;
margin: 0 auto;
}
.error {
color: red;
}
</style>配置路由
在 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 发送登录请求，示例后端接口为 /api/login：
import axios from "axios";
axios.post("/api/login", {
username: "user",
password: "pass",
})
.then(response => {
console.log(response.data);
})
.catch(error => {
console.error(error);
});处理登录状态
登录成功后存储 token 并跳转页面：
localStorage.setItem("token", response.data.token);
this.$router.push("/dashboard");注销功能
在需要注销的地方清除 token 并重定向到登录页：
localStorage.removeItem("token");
this.$router.push("/login");注意事项
- 使用 HTTPS 保护用户凭证。
- 后端应对密码进行哈希处理，避免明文存储。
- 前端可通过 Vuex 集中管理登录状态（可选）。
- 表单需添加输入验证（如长度、格式检查）。
