vue实现登录
Vue 实现登录功能
创建登录表单组件
在 Vue 项目中创建一个登录表单组件，包含用户名和密码输入框以及登录按钮。使用 v-model 绑定表单数据。
<template>
<div class="login-form">
<h3>登录</h3>
<form @submit.prevent="handleLogin">
<div class="form-group">
<label for="username">用户名</label>
<input
type="text"
id="username"
v-model="loginForm.username"
placeholder="请输入用户名"
/>
</div>
<div class="form-group">
<label for="password">密码</label>
<input
type="password"
id="password"
v-model="loginForm.password"
placeholder="请输入密码"
/>
</div>
<button type="submit" class="login-btn">登录</button>
</form>
</div>
</template>
<script>
export default {
data() {
return {
loginForm: {
username: "",
password: "",
},
};
},
methods: {
handleLogin() {
// 登录逻辑
},
},
};
</script>
<style scoped>
.login-form {
max-width: 300px;
margin: 0 auto;
}
.form-group {
margin-bottom: 15px;
}
.login-btn {
width: 100%;
padding: 8px;
background-color: #42b983;
color: white;
border: none;
border-radius: 4px;
}
</style>实现登录逻辑
在 handleLogin 方法中，调用后端 API 发送登录请求。可以使用 axios 或其他 HTTP 客户端库。
methods: {
async handleLogin() {
try {
const response = await axios.post("/api/login", this.loginForm);
const { token, user } = response.data;
// 存储 token 和用户信息
localStorage.setItem("token", token);
this.$store.commit("setUser", user);
// 跳转到首页或其他页面
this.$router.push("/");
} catch (error) {
console.error("登录失败:", error);
alert("登录失败，请检查用户名和密码");
}
},
},使用 Vuex 管理用户状态
在 Vuex store 中定义用户状态和 mutations，用于全局管理用户登录状态。
// store/index.js
import Vue from "vue";
import Vuex from "vuex";
Vue.use(Vuex);
export default new Vuex.Store({
state: {
user: null,
isAuthenticated: false,
},
mutations: {
setUser(state, user) {
state.user = user;
state.isAuthenticated = true;
},
logout(state) {
state.user = null;
state.isAuthenticated = false;
},
},
});路由守卫验证登录状态
在 Vue Router 中使用导航守卫，验证用户是否已登录，未登录则重定向到登录页面。
// router/index.js
import Vue from "vue";
import Router from "vue-router";
import store from "../store";
Vue.use(Router);
const router = new Router({
routes: [
{
path: "/login",
component: () => import("../views/Login.vue"),
},
{
path: "/",
component: () => import("../views/Home.vue"),
meta: { requiresAuth: true },
},
],
});
router.beforeEach((to, from, next) => {
if (to.matched.some((record) => record.meta.requiresAuth)) {
if (!store.state.isAuthenticated) {
next("/login");
} else {
next();
}
} else {
next();
}
});
export default router;处理退出登录
在需要退出登录的地方调用 Vuex 的 logout mutation，并清除本地存储的 token。
methods: {
logout() {
this.$store.commit("logout");
localStorage.removeItem("token");
this.$router.push("/login");
},
},集成第三方登录（可选）
如果需要集成第三方登录（如 Google、GitHub），可以使用相应的 SDK 或 OAuth 库。
methods: {
handleGoogleLogin() {
// 使用 Google SDK 或 OAuth 流程
// 获取 token 后调用后端 API 验证
},
},通过以上步骤，可以在 Vue 项目中实现完整的登录功能，包括表单验证、状态管理、路由守卫等。
