当前位置：首页 > VUE

vue登录注册实现

2026-03-08 06:05:53VUE

实现Vue登录注册功能

项目结构搭建

使用Vue CLI创建项目，安装必要依赖如vue-router、axios、vuex。项目结构建议包含views（Login.vue、Register.vue）、router（index.js）、store（auth.js）等目录。

路由配置

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

const routes = [
  {
    path: '/login',
    name: 'Login',
    component: () => import('../views/Login.vue')
  },
  {
    path: '/register',
    name: 'Register',
    component: () => import('../views/Register.vue')
  }
]

表单组件开发

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

状态管理

在store/auth.js中创建Vuex模块管理认证状态：

const state = {
  user: null,
  token: localStorage.getItem('token') || null
}

const mutations = {
  SET_USER(state, user) {
    state.user = user
  },
  SET_TOKEN(state, token) {
    state.token = token
    localStorage.setItem('token', token)
  }
}

API请求封装

创建services/auth.js封装HTTP请求：

import axios from 'axios'

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

表单验证处理

使用Vuelidate或自定义验证：

validations: {
  email: { required, email },
  password: { required, minLength: minLength(6) }
}

路由守卫配置

在router/index.js中添加全局前置守卫：

router.beforeEach((to, from, next) => {
  const isAuthenticated = store.state.auth.token
  if (to.meta.requiresAuth && !isAuthenticated) {
    next('/login')
  } else {
    next()
  }
})

响应处理

在组件中处理API响应：

methods: {
  async handleLogin() {
    try {
      const response = await authService.login({
        email: this.email,
        password: this.password
      })
      this.$store.commit('SET_TOKEN', response.data.token)
      this.$router.push('/dashboard')
    } catch (error) {
      this.error = error.response.data.message
    }
  }
}

注册流程实现

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

密码加密处理

确保后端API对密码进行加密存储，前端只需发送明文密码到安全HTTPS端点。

错误处理优化

全局配置axios拦截器处理常见错误：

vue登录注册实现

axios.interceptors.response.use(
  response => response,
  error => {
    if (error.response.status === 401) {
      store.commit('LOGOUT')
      router.push('/login')
    }
    return Promise.reject(error)
  }
)