当前位置：首页 > VUE

vue登录注册实现源码

2026-02-24 05:54:18VUE

Vue 登录注册实现源码

基础项目结构

使用 Vue CLI 创建项目，安装必要依赖（如 vue-router、axios）：

vue create auth-demo
cd auth-demo
npm install vue-router axios

路由配置

在 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'
import Dashboard from '@/views/Dashboard.vue'

Vue.use(Router)

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

登录组件

src/views/Login.vue 示例代码：

vue登录注册实现源码

<template>
  <div>
    <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 this.$axios.post('/api/login', {
          email: this.email,
          password: this.password
        })
        localStorage.setItem('token', response.data.token)
        this.$router.push('/dashboard')
      } catch (error) {
        alert('Login failed')
      }
    }
  }
}
</script>

注册组件

src/views/Register.vue 示例代码：

<template>
  <div>
    <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 this.$axios.post('/api/register', {
          name: this.name,
          email: this.email,
          password: this.password
        })
        this.$router.push('/login')
      } catch (error) {
        alert('Registration failed')
      }
    }
  }
}
</script>

路由守卫

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

vue登录注册实现源码

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

API 请求封装

在 src/main.js 中配置 axios：

import axios from 'axios'
Vue.prototype.$axios = axios.create({
  baseURL: 'http://your-api-url.com'
})

后端接口示例

Node.js 后端接口示例（需单独实现）：

// Express 示例
app.post('/api/login', (req, res) => {
  // 验证用户逻辑
  res.json({ token: 'generated-jwt-token' })
})

app.post('/api/register', (req, res) => {
  // 用户注册逻辑
  res.json({ success: true })
})