当前位置：首页 > VUE

vue项目实现注册登录

2026-01-21 22:39:48VUE

Vue 项目实现注册登录功能

注册登录功能是 Web 应用的基础功能，Vue 项目可以通过以下步骤实现。

项目结构

确保项目结构清晰，通常包含以下关键文件：

src/views/Login.vue：登录页面
src/views/Register.vue：注册页面
src/store/auth.js：状态管理（如使用 Vuex）
src/router/index.js：路由配置
src/api/auth.js：API 请求封装

前端页面实现

登录页面 (Login.vue)

<template>
  <div>
    <h2>登录</h2>
    <form @submit.prevent="handleLogin">
      <input v-model="email" type="email" placeholder="邮箱" required />
      <input v-model="password" type="password" placeholder="密码" required />
      <button type="submit">登录</button>
    </form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      email: "",
      password: "",
    };
  },
  methods: {
    async handleLogin() {
      try {
        const response = await this.$axios.post("/auth/login", {
          email: this.email,
          password: this.password,
        });
        localStorage.setItem("token", response.data.token);
        this.$router.push("/dashboard");
      } catch (error) {
        console.error("登录失败", error);
      }
    },
  },
};
</script>

注册页面 (Register.vue)

vue项目实现注册登录

<template>
  <div>
    <h2>注册</h2>
    <form @submit.prevent="handleRegister">
      <input v-model="name" type="text" placeholder="用户名" required />
      <input v-model="email" type="email" placeholder="邮箱" required />
      <input v-model="password" type="password" placeholder="密码" required />
      <button type="submit">注册</button>
    </form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      name: "",
      email: "",
      password: "",
    };
  },
  methods: {
    async handleRegister() {
      try {
        await this.$axios.post("/auth/register", {
          name: this.name,
          email: this.email,
          password: this.password,
        });
        this.$router.push("/login");
      } catch (error) {
        console.error("注册失败", error);
      }
    },
  },
};
</script>

路由配置

在 src/router/index.js 中配置路由：

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

Vue.use(Router);

export default new Router({
  routes: [
    { path: "/login", component: Login },
    { path: "/register", component: Register },
  ],
});

状态管理（Vuex）

在 src/store/auth.js 中管理用户状态：

export default {
  state: {
    user: null,
    token: localStorage.getItem("token") || null,
  },
  mutations: {
    setUser(state, user) {
      state.user = user;
    },
    setToken(state, token) {
      state.token = token;
      localStorage.setItem("token", token);
    },
    logout(state) {
      state.user = null;
      state.token = null;
      localStorage.removeItem("token");
    },
  },
  actions: {
    async login({ commit }, credentials) {
      const response = await axios.post("/auth/login", credentials);
      commit("setToken", response.data.token);
      commit("setUser", response.data.user);
    },
    async register({ commit }, userData) {
      await axios.post("/auth/register", userData);
    },
    logout({ commit }) {
      commit("logout");
    },
  },
};

API 请求封装

在 src/api/auth.js 中封装 API 请求：

vue项目实现注册登录

import axios from "axios";

export default {
  login(credentials) {
    return axios.post("/auth/login", credentials);
  },
  register(userData) {
    return axios.post("/auth/register", userData);
  },
};

后端接口（示例）

假设后端使用 Node.js + Express，提供以下接口：

const express = require("express");
const jwt = require("jsonwebtoken");
const app = express();

app.post("/auth/login", (req, res) => {
  const { email, password } = req.body;
  // 验证用户逻辑
  const token = jwt.sign({ userId: 1 }, "secret_key");
  res.json({ token });
});

app.post("/auth/register", (req, res) => {
  const { name, email, password } = req.body;
  // 注册逻辑
  res.status(201).send();
});

权限控制

在路由守卫中检查用户是否登录：

router.beforeEach((to, from, next) => {
  const isAuthenticated = localStorage.getItem("token");
  if (to.meta.requiresAuth && !isAuthenticated) {
    next("/login");
  } else {
    next();
  }
});

表单验证

可以使用 vee-validate 或手动验证：

methods: {
  validateEmail(email) {
    const re = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
    return re.test(email);
  },
  validatePassword(password) {
    return password.length >= 6;
  },
},