vue实现登录 注册

Vue实现登录注册功能

环境准备 确保已安装Vue CLI和Node.js环境。创建Vue项目：

vue create auth-demo

安装必要依赖 需要安装vue-router和axios：

npm install vue-router axios

项目结构

src/
├── components/
│   ├── Login.vue
│   └── Register.vue
├── views/
│   ├── Home.vue
│   └── Dashboard.vue
├── router/
│   └── index.js
├── App.vue
└── main.js

路由配置

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

import Vue from 'vue'
import Router from 'vue-router'
import Login from '@/components/Login'
import Register from '@/components/Register'
import Dashboard from '@/views/Dashboard'

Vue.use(Router)

export default new Router({
  routes: [
    { path: '/login', component: Login },
    { path: '/register', component: Register },
    { path: '/dashboard', component: Dashboard, meta: { requiresAuth: true } }
  ]
})

登录组件实现

Login.vue示例代码：

<template>
  <div class="login">
    <h2>Login</h2>
    <form @submit.prevent="handleLogin">
      <input v-model="email" type="email" placeholder="Email" required>
      <input v-model="password" type="password" placeholder="Password" required>
      <button type="submit">Login</button>
    </form>
  </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) {
        console.error(error)
      }
    }
  }
}
</script>

注册组件实现

Register.vue示例代码：

<template>
  <div class="register">
    <h2>Register</h2>
    <form @submit.prevent="handleRegister">
      <input v-model="name" type="text" placeholder="Name" required>
      <input v-model="email" type="email" placeholder="Email" required>
      <input v-model="password" type="password" placeholder="Password" required>
      <button type="submit">Register</button>
    </form>
  </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
        })
        this.$router.push('/login')
      } catch (error) {
        console.error(error)
      }
    }
  }
}
</script>

路由守卫实现

在main.js中添加全局路由守卫：

router.beforeEach((to, from, next) => {
  const token = localStorage.getItem('token')
  if (to.matched.some(record => record.meta.requiresAuth) && !token) {
    next('/login')
  } else {
    next()
  }
})

API请求封装

创建utils/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(credentials) {
    return api.post('/register', credentials)
  }
}

状态管理（可选）

对于复杂应用，建议使用Vuex管理登录状态：

// store/index.js
export default new Vuex.Store({
  state: {
    user: null,
    token: null
  },
  mutations: {
    setUser(state, user) {
      state.user = user
    },
    setToken(state, token) {
      state.token = token
    }
  },
  actions: {
    login({ commit }, credentials) {
      return auth.login(credentials).then(response => {
        commit('setToken', response.data.token)
        commit('setUser', response.data.user)
      })
    }
  }
})

表单验证增强

可以使用Vuelidate进行表单验证：

npm install vuelidate

在组件中使用：

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

export default {
  data() {
    return {
      email: '',
      password: ''
    }
  },
  validations: {
    email: { required, email },
    password: { required }
  },
  methods: {
    handleLogin() {
      this.$v.$touch()
      if (!this.$v.$invalid) {
        // 提交逻辑
      }
    }
  }
}
</script>