vue实现注册登录页面

Vue 实现注册登录页面

项目初始化

使用 Vue CLI 创建新项目：

vue create auth-demo

选择默认配置或手动配置（推荐包含 Vue Router 和 Vuex）。

安装依赖

安装必要库（如表单验证、UI 框架）：

npm install axios vuex-persistedstate

路由配置

在 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="auth-form">
    <h3>登录</h3>
    <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>
    <router-link to="/register">前往注册</router-link>
  </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('/dashboard')
      } catch (error) {
        alert('登录失败')
      }
    }
  }
}
</script>

注册组件

src/views/Register.vue 类似结构：

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

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

状态管理

src/store/index.js 配置 Vuex：

import Vue from 'vue'
import Vuex from 'vuex'
import createPersistedState from 'vuex-persistedstate'

Vue.use(Vuex)

export default new Vuex.Store({
  plugins: [createPersistedState()],
  state: {
    user: null,
    token: null
  },
  mutations: {
    setUser(state, payload) {
      state.user = payload.user
      state.token = payload.token
    }
  },
  actions: {
    login({ commit }, credentials) {
      return axios.post('/api/login', credentials)
        .then(response => {
          commit('setUser', response.data)
        })
    }
  }
})

样式优化

添加基础样式 src/assets/auth.css：

.auth-form {
  max-width: 400px;
  margin: 2rem auto;
  padding: 2rem;
  border: 1px solid #ddd;
  border-radius: 8px;
}

.auth-form input {
  display: block;
  width: 100%;
  margin: 0.5rem 0;
  padding: 0.5rem;
}

表单验证

使用 Vuelidate 进行验证：

npm install vuelidate

在组件中添加：

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

export default {
  validations: {
    email: { required, email },
    password: { required }
  }
}

API 封装

创建 src/api/auth.js：

import axios from 'axios'

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

路由守卫

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

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

响应式布局

使用 CSS 媒体查询适应移动端：

@media (max-width: 600px) {
  .auth-form {
    margin: 1rem;
    padding: 1rem;
  }
}