vue 实现登录注册

Vue 实现登录注册功能

项目结构

建议采用以下目录结构组织登录注册模块：

src/
├── components/
│   ├── Login.vue
│   ├── Register.vue
├── router/
│   ├── index.js
├── store/
│   ├── modules/
│   │   ├── auth.js
├── views/
│   ├── AuthLayout.vue

登录组件实现

在Login.vue中创建基础表单：

<template>
  <form @submit.prevent="handleLogin">
    <input v-model="form.email" type="email" placeholder="Email" required>
    <input v-model="form.password" type="password" placeholder="Password" required>
    <button type="submit">Login</button>
  </form>
</template>

<script>
export default {
  data() {
    return {
      form: {
        email: '',
        password: ''
      }
    }
  },
  methods: {
    async handleLogin() {
      try {
        await this.$store.dispatch('auth/login', this.form)
        this.$router.push('/dashboard')
      } catch (error) {
        console.error(error)
      }
    }
  }
}
</script>

注册组件实现

在Register.vue中添加验证逻辑：

<template>
  <form @submit.prevent="handleRegister">
    <input v-model="form.name" type="text" placeholder="Name" required>
    <input v-model="form.email" type="email" placeholder="Email" required>
    <input v-model="form.password" type="password" placeholder="Password" required>
    <input v-model="form.passwordConfirm" type="password" placeholder="Confirm Password" required>
    <button type="submit">Register</button>
  </form>
</template>

<script>
export default {
  data() {
    return {
      form: {
        name: '',
        email: '',
        password: '',
        passwordConfirm: ''
      }
    }
  },
  methods: {
    validateForm() {
      return this.form.password === this.form.passwordConfirm
    },
    async handleRegister() {
      if (!this.validateForm()) return alert('Passwords do not match')

      try {
        await this.$store.dispatch('auth/register', this.form)
        this.$router.push('/login')
      } catch (error) {
        console.error(error)
      }
    }
  }
}
</script>

Vuex状态管理

创建auth.js模块处理认证逻辑：

const actions = {
  async login({ commit }, credentials) {
    const response = await axios.post('/api/login', credentials)
    commit('SET_USER', response.data.user)
    localStorage.setItem('token', response.data.token)
  },
  async register({ commit }, userData) {
    const response = await axios.post('/api/register', userData)
    commit('SET_USER', response.data.user)
    localStorage.setItem('token', response.data.token)
  },
  logout({ commit }) {
    commit('CLEAR_USER')
    localStorage.removeItem('token')
  }
}

const mutations = {
  SET_USER(state, user) {
    state.user = user
    state.isAuthenticated = true
  },
  CLEAR_USER(state) {
    state.user = null
    state.isAuthenticated = false
  }
}

const state = {
  user: null,
  isAuthenticated: false
}

export default {
  namespaced: true,
  state,
  actions,
  mutations
}

路由配置

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

import store from '@/store'

const routes = [
  {
    path: '/login',
    component: () => import('@/components/Login'),
    meta: { requiresGuest: true }
  },
  {
    path: '/register',
    component: () => import('@/components/Register'),
    meta: { requiresGuest: true }
  },
  {
    path: '/dashboard',
    component: () => import('@/views/Dashboard'),
    meta: { requiresAuth: true }
  }
]

router.beforeEach((to, from, next) => {
  if (to.matched.some(record => record.meta.requiresAuth)) {
    if (!store.getters['auth/isAuthenticated']) {
      next('/login')
    } else {
      next()
    }
  } else if (to.matched.some(record => record.meta.requiresGuest)) {
    if (store.getters['auth/isAuthenticated']) {
      next('/dashboard')
    } else {
      next()
    }
  } else {
    next()
  }
})

表单验证增强

推荐使用VeeValidate进行表单验证：

npm install vee-validate

在main.js中配置：

import { ValidationProvider, extend } from 'vee-validate'
import { required, email, min, confirmed } from 'vee-validate/dist/rules'

extend('required', required)
extend('email', email)
extend('min', min)
extend('confirmed', confirmed)

Vue.component('ValidationProvider', ValidationProvider)

样式优化

建议使用Tailwind CSS或Element UI等库快速构建UI：

npm install element-ui

在main.js中引入：

import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
Vue.use(ElementUI)

接口安全

实现JWT认证时需注意：

• 前端存储token使用httpOnly和Secure标志
• 每次请求在axios拦截器中添加Authorization头

  axios.interceptors.request.use(config => {
  const token = localStorage.getItem('token')
  if (token) {
    config.headers.Authorization = `Bearer ${token}`
  }
  return config
  })

响应式布局

使用媒体查询适应不同设备：

@media (max-width: 640px) {
  .auth-form {
    width: 90%;
    margin: 0 auto;
  }
}