当前位置：首页 > VUE

vue实现注册登陆

2026-02-22 01:50:20VUE

Vue 实现注册登录功能

使用 Vue 实现注册登录功能通常需要结合 Vue Router 和状态管理工具（如 Vuex 或 Pinia），以及后端 API 进行数据交互。以下是实现的基本步骤和代码示例。

项目结构准备

确保已安装 Vue 和 Vue Router。如果尚未安装，可以通过以下命令初始化项目：

npm init vue@latest
# 选择 Router 和 Pinia（或其他状态管理工具）
cd your-project
npm install

路由配置

在 src/router/index.js 中配置登录和注册页面的路由：

import { createRouter, createWebHistory } from 'vue-router';
import Login from '../views/Login.vue';
import Register from '../views/Register.vue';
import Home from '../views/Home.vue';

const routes = [
  { path: '/login', component: Login },
  { path: '/register', component: Register },
  { path: '/', component: Home, meta: { requiresAuth: true } },
];

const router = createRouter({
  history: createWebHistory(),
  routes,
});

export default router;

登录页面实现

在 src/views/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>
    <p>还没有账号？<router-link to="/register">注册</router-link></p>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import { useRouter } from 'vue-router';
import { useAuthStore } from '../stores/auth';

const email = ref('');
const password = ref('');
const router = useRouter();
const authStore = useAuthStore();

const handleLogin = async () => {
  try {
    await authStore.login({ email: email.value, password: password.value });
    router.push('/');
  } catch (error) {
    alert('登录失败：' + error.message);
  }
};
</script>

注册页面实现

在 src/views/Register.vue 中实现注册表单和逻辑：

<template>
  <div>
    <h2>注册</h2>
    <form @submit.prevent="handleRegister">
      <input v-model="email" type="email" placeholder="邮箱" required />
      <input v-model="password" type="password" placeholder="密码" required />
      <button type="submit">注册</button>
    </form>
    <p>已有账号？<router-link to="/login">登录</router-link></p>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import { useRouter } from 'vue-router';
import { useAuthStore } from '../stores/auth';

const email = ref('');
const password = ref('');
const router = useRouter();
const authStore = useAuthStore();

const handleRegister = async () => {
  try {
    await authStore.register({ email: email.value, password: password.value });
    router.push('/login');
  } catch (error) {
    alert('注册失败：' + error.message);
  }
};
</script>

状态管理

使用 Pinia 管理用户认证状态。在 src/stores/auth.js 中定义：

import { defineStore } from 'pinia';
import { ref } from 'vue';
import { mockLogin, mockRegister } from '../api/auth';

export const useAuthStore = defineStore('auth', () => {
  const user = ref(null);
  const isAuthenticated = ref(false);

  const login = async (credentials) => {
    const response = await mockLogin(credentials);
    user.value = response.user;
    isAuthenticated.value = true;
  };

  const register = async (credentials) => {
    await mockRegister(credentials);
  };

  const logout = () => {
    user.value = null;
    isAuthenticated.value = false;
  };

  return { user, isAuthenticated, login, register, logout };
});

模拟 API

在 src/api/auth.js 中模拟 API 调用：

export const mockLogin = async ({ email, password }) => {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve({ user: { email, id: 1 } });
    }, 500);
  });
};

export const mockRegister = async ({ email, password }) => {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve();
    }, 500);
  });
};

路由守卫

在 src/router/index.js 中添加路由守卫，保护需要认证的页面：

router.beforeEach((to, from, next) => {
  const authStore = useAuthStore();
  if (to.meta.requiresAuth && !authStore.isAuthenticated) {
    next('/login');
  } else {
    next();
  }
});

主页面

在 src/views/Home.vue 中实现登录后的主页：

vue实现注册登陆

<template>
  <div>
    <h2>欢迎, {{ authStore.user?.email }}</h2>
    <button @click="authStore.logout">退出登录</button>
  </div>
</template>

<script setup>
import { useAuthStore } from '../stores/auth';

const authStore = useAuthStore();
</script>