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 调用、状态管理和路由保护。实际项目中可能需要根据具体需求进行调整和扩展。