vue实现login

Vue 实现登录功能

创建登录表单组件

在 Vue 项目中创建一个登录表单组件，通常命名为 Login.vue。该组件包含用户名和密码输入框，以及提交按钮。

<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="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: {
    handleLogin() {
      // 登录逻辑
    },
  },
};
</script>

<style scoped>
.login-form {
  max-width: 300px;
  margin: 0 auto;
  padding: 20px;
}
.form-group {
  margin-bottom: 15px;
}
label {
  display: block;
  margin-bottom: 5px;
}
input {
  width: 100%;
  padding: 8px;
  box-sizing: border-box;
}
button {
  width: 100%;
  padding: 10px;
  background-color: #42b983;
  color: white;
  border: none;
  cursor: pointer;
}
</style>

实现登录逻辑

在 handleLogin 方法中，添加登录逻辑。通常需要调用后端 API 验证用户凭据。

methods: {
  async handleLogin() {
    try {
      const response = await axios.post("/api/login", {
        username: this.username,
        password: this.password,
      });

      // 存储用户 token 或其他认证信息
      localStorage.setItem("userToken", response.data.token);

      // 跳转到主页或其他受保护的路由
      this.$router.push("/dashboard");
    } catch (error) {
      console.error("登录失败:", error);
      alert("登录失败，请检查用户名和密码");
    }
  },
},

添加路由配置

在 Vue Router 中配置登录页面的路由。

import Vue from "vue";
import Router from "vue-router";
import Login from "./views/Login.vue";

Vue.use(Router);

export default new Router({
  routes: [
    {
      path: "/login",
      name: "login",
      component: Login,
    },
    // 其他路由...
  ],
});

实现路由守卫

为了保护需要认证的路由，可以添加全局路由守卫，检查用户是否已登录。

router.beforeEach((to, from, next) => {
  const isAuthenticated = localStorage.getItem("userToken");

  if (to.name !== "login" && !isAuthenticated) {
    next({ name: "login" });
  } else {
    next();
  }
});

使用 Vuex 管理登录状态

对于更复杂的应用，可以使用 Vuex 集中管理用户登录状态。

// store.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;
    },
  },
  actions: {
    login({ commit }, userData) {
      return axios.post("/api/login", userData).then((response) => {
        commit("setUser", response.data.user);
        localStorage.setItem("userToken", response.data.token);
      });
    },
    logout({ commit }) {
      localStorage.removeItem("userToken");
      commit("logout");
    },
  },
});

登录组件集成 Vuex

在登录组件中，使用 Vuex action 处理登录。

import { mapActions } from "vuex";

methods: {
  ...mapActions(["login"]),
  async handleLogin() {
    try {
      await this.login({
        username: this.username,
        password: this.password,
      });
      this.$router.push("/dashboard");
    } catch (error) {
      console.error("登录失败:", error);
      alert("登录失败，请检查用户名和密码");
    }
  },
},

表单验证

添加基本的表单验证，确保用户输入符合要求。

data() {
  return {
    username: "",
    password: "",
    errors: {},
  };
},
methods: {
  validateForm() {
    this.errors = {};

    if (!this.username) {
      this.errors.username = "用户名不能为空";
    }

    if (!this.password) {
      this.errors.password = "密码不能为空";
    } else if (this.password.length < 6) {
      this.errors.password = "密码长度不能少于6位";
    }

    return Object.keys(this.errors).length === 0;
  },
  async handleLogin() {
    if (!this.validateForm()) return;

    // 其余登录逻辑...
  },
},

显示验证错误

在模板中显示验证错误信息。

<div class="form-group">
  <label for="username">用户名</label>
  <input
    type="text"
    id="username"
    v-model="username"
    placeholder="请输入用户名"
  />
  <span class="error" v-if="errors.username">{{ errors.username }}</span>
</div>

<div class="form-group">
  <label for="password">密码</label>
  <input
    type="password"
    id="password"
    v-model="password"
    placeholder="请输入密码"
  />
  <span class="error" v-if="errors.password">{{ errors.password }}</span>
</div>

<style scoped>
.error {
  color: red;
  font-size: 12px;
}
</style>