vue实现简单登录注册

Vue 实现登录注册功能

项目初始化

使用 Vue CLI 创建项目

vue create auth-demo
cd auth-demo

安装必要依赖

npm install axios vue-router

路由配置

在 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 }
  ]
})

登录组件

创建 src/views/Login.vue

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

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

注册组件

创建 src/views/Register.vue

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

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

API 请求封装

创建 src/api/auth.js

import axios from 'axios'

const api = axios.create({
  baseURL: 'http://your-api-url.com'
})

export default {
  login(credentials) {
    return api.post('/login', credentials)
  },
  register(info) {
    return api.post('/register', info)
  }
}

状态管理（可选）

如需使用 Vuex 管理登录状态，创建 src/store/index.js

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
  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')
    }
  }
})

导航守卫

在 src/router/index.js 中添加导航守卫

router.beforeEach((to, from, next) => {
  const isAuthenticated = localStorage.getItem('token')
  if (to.path !== '/login' && to.path !== '/register' && !isAuthenticated) {
    return next('/login')
  }
  next()
})

样式设计

添加基础样式到 App.vue

<style>
form {
  display: flex;
  flex-direction: column;
  max-width: 300px;
  margin: 0 auto;
}
input {
  margin: 5px 0;
  padding: 8px;
}
button {
  margin-top: 10px;
  padding: 8px;
}
</style>

后端接口示例

Node.js Express 示例

// 登录接口
app.post('/api/login', (req, res) => {
  // 验证用户信息
  // 返回 token
  res.json({ token: 'generated-jwt-token' })
})

// 注册接口
app.post('/api/register', (req, res) => {
  // 保存用户信息
  res.json({ success: true })
})

表单验证增强

使用 Vuelidate 进行表单验证

npm install vuelidate

在组件中添加验证

import { required, email } from 'vuelidate/lib/validators'

export default {
  data() {
    return {
      email: '',
      password: ''
    }
  },
  validations: {
    email: { required, email },
    password: { required }
  }
}

响应式布局

添加响应式样式

@media (max-width: 600px) {
  form {
    width: 90%;
  }
}