vue 实现简单登录

实现 Vue 简单登录功能

创建登录组件

在 Vue 项目中创建一个登录组件 Login.vue，包含用户名和密码输入框以及登录按钮。

<template>
  <div class="login-container">
    <h3>登录</h3>
    <form @submit.prevent="handleLogin">
      <div class="form-group">
        <label for="username">用户名</label>
        <input
          type="text"
          id="username"
          v-model="username"
          placeholder="请输入用户名"
        />
      </div>
      <div class="form-group">
        <label for="password">密码</label>
        <input
          type="password"
          id="password"
          v-model="password"
          placeholder="请输入密码"
        />
      </div>
      <button type="submit">登录</button>
    </form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      username: "",
      password: "",
    };
  },
  methods: {
    handleLogin() {
      if (this.username && this.password) {
        // 登录逻辑
        alert("登录成功");
      } else {
        alert("请输入用户名和密码");
      }
    },
  },
};
</script>

<style scoped>
.login-container {
  max-width: 300px;
  margin: 0 auto;
  padding: 20px;
  border: 1px solid #ddd;
  border-radius: 5px;
}
.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;
  border-radius: 5px;
  cursor: pointer;
}
</style>

添加路由配置

在 router/index.js 中配置登录页面的路由。

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

Vue.use(VueRouter);

const routes = [
  {
    path: "/login",
    name: "Login",
    component: Login,
  },
];

const router = new VueRouter({
  routes,
});

export default router;

实现简单验证

在登录方法中添加简单的用户名和密码验证逻辑。

methods: {
  handleLogin() {
    if (!this.username || !this.password) {
      alert("请输入用户名和密码");
      return;
    }

    // 简单验证
    if (this.username === "admin" && this.password === "123456") {
      alert("登录成功");
      // 登录成功后跳转到首页
      this.$router.push("/");
    } else {
      alert("用户名或密码错误");
    }
  },
},

添加状态管理

使用 Vuex 管理登录状态，在 store/index.js 中创建状态管理。

import Vue from "vue";
import Vuex from "vuex";

Vue.use(Vuex);

export default new Vuex.Store({
  state: {
    isAuthenticated: false,
    user: null,
  },
  mutations: {
    login(state, user) {
      state.isAuthenticated = true;
      state.user = user;
    },
    logout(state) {
      state.isAuthenticated = false;
      state.user = null;
    },
  },
  actions: {
    login({ commit }, user) {
      commit("login", user);
    },
    logout({ commit }) {
      commit("logout");
    },
  },
});

完善登录逻辑

修改登录方法，使用 Vuex 管理登录状态。

methods: {
  handleLogin() {
    if (!this.username || !this.password) {
      alert("请输入用户名和密码");
      return;
    }

    if (this.username === "admin" && this.password === "123456") {
      this.$store.dispatch("login", { username: this.username });
      this.$router.push("/");
    } else {
      alert("用户名或密码错误");
    }
  },
},

添加导航守卫

在路由中添加导航守卫，保护需要登录才能访问的页面。

router.beforeEach((to, from, next) => {
  const isAuthenticated = store.state.isAuthenticated;

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

实现退出登录

在需要的地方添加退出登录功能。

methods: {
  logout() {
    this.$store.dispatch("logout");
    this.$router.push("/login");
  },
},

完整示例代码

Login.vue 完整示例：

<template>
  <div class="login-container">
    <h3>登录</h3>
    <form @submit.prevent="handleLogin">
      <div class="form-group">
        <label for="username">用户名</label>
        <input
          type="text"
          id="username"
          v-model="username"
          placeholder="请输入用户名"
        />
      </div>
      <div class="form-group">
        <label for="password">密码</label>
        <input
          type="password"
          id="password"
          v-model="password"
          placeholder="请输入密码"
        />
      </div>
      <button type="submit">登录</button>
    </form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      username: "",
      password: "",
    };
  },
  methods: {
    handleLogin() {
      if (!this.username || !this.password) {
        alert("请输入用户名和密码");
        return;
      }

      if (this.username === "admin" && this.password === "123456") {
        this.$store.dispatch("login", { username: this.username });
        this.$router.push("/");
      } else {
        alert("用户名或密码错误");
      }
    },
  },
};
</script>

<style scoped>
.login-container {
  max-width: 300px;
  margin: 0 auto;
  padding: 20px;
  border: 1px solid #ddd;
  border-radius: 5px;
}
.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;
  border-radius: 5px;
  cursor: pointer;
}
</style>

以上代码实现了一个简单的 Vue 登录功能，包括表单验证、状态管理和路由保护。可以根据实际需求进一步完善和扩展功能。