vue实现登录
使用 Vue 实现登录功能
在 Vue 中实现登录功能通常需要结合前端和后端交互，以下是关键步骤和代码示例。
创建登录表单组件
在 Vue 组件中创建一个登录表单，包含用户名和密码输入框以及提交按钮。
<template>
<div class="login-form">
<h2>登录</h2>
<form @submit.prevent="handleLogin">
<div class="form-group">
<label for="username">用户名</label>
<input
type="text"
id="username"
v-model="username"
placeholder="请输入用户名"
required
/>
</div>
<div class="form-group">
<label for="password">密码</label>
<input
type="password"
id="password"
v-model="password"
placeholder="请输入密码"
required
/>
</div>
<button type="submit">登录</button>
</form>
</div>
</template>
<script>
export default {
data() {
return {
username: "",
password: "",
};
},
methods: {
async handleLogin() {
try {
const response = await this.$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>
<style scoped>
.login-form {
max-width: 400px;
margin: 0 auto;
padding: 20px;
}
.form-group {
margin-bottom: 15px;
}
</style>配置 Axios 进行 API 调用
安装并配置 Axios 用于发送 HTTP 请求到后端 API。
npm install axios在 main.js 或单独的文件中配置 Axios。
import axios from "axios";
Vue.prototype.$axios = axios.create({
baseURL: "http://your-api-url.com",
});处理登录状态和路由守卫
使用 Vue Router 的导航守卫保护需要登录才能访问的路由。
import Vue from "vue";
import Router from "vue-router";
Vue.use(Router);
const router = new Router({
routes: [
{
path: "/login",
component: () => import("./views/Login.vue"),
},
{
path: "/dashboard",
component: () => import("./views/Dashboard.vue"),
meta: { requiresAuth: true },
},
],
});
router.beforeEach((to, from, next) => {
const token = localStorage.getItem("token");
if (to.meta.requiresAuth && !token) {
next("/login");
} else {
next();
}
});
export default router;后端 API 示例
假设后端使用 Node.js 和 Express 提供登录接口。
const express = require("express");
const jwt = require("jsonwebtoken");
const app = express();
app.use(express.json());
app.post("/api/login", (req, res) => {
const { username, password } = req.body;
// 实际项目中应该查询数据库验证用户
if (username === "admin" && password === "123456") {
const token = jwt.sign({ username }, "secret_key", { expiresIn: "1h" });
res.json({ token });
} else {
res.status(401).json({ error: "用户名或密码错误" });
}
});
app.listen(3000, () => {
console.log("Server running on port 3000");
});添加错误处理和用户反馈
在登录失败时显示错误信息给用户。
<template>
<div>
<p v-if="error" class="error">{{ error }}</p>
</div>
</template>
<script>
export default {
data() {
return {
error: "",
};
},
methods: {
async handleLogin() {
try {
const response = await this.$axios.post("/api/login", {
username: this.username,
password: this.password,
});
localStorage.setItem("token", response.data.token);
this.$router.push("/dashboard");
} catch (error) {
this.error = "登录失败，请检查用户名和密码";
}
},
},
};
</script>使用 Vuex 管理登录状态
对于更复杂的应用，可以使用 Vuex 集中管理用户登录状态。
import Vue from "vue";
import Vuex from "vuex";
Vue.use(Vuex);
export default new Vuex.Store({
state: {
user: null,
token: null,
},
mutations: {
setUser(state, user) {
state.user = user;
},
setToken(state, token) {
state.token = token;
},
},
actions: {
login({ commit }, { username, password }) {
return axios.post("/api/login", { username, password }).then((response) => {
commit("setUser", { username });
commit("setToken", response.data.token);
localStorage.setItem("token", response.data.token);
});
},
},
});以上代码示例展示了在 Vue 中实现登录功能的主要步骤，包括表单创建、API 调用、状态管理和路由保护。实际项目中可能需要根据具体需求进行调整和扩展。
