当前位置：首页 > VUE

vue实现网站注册登录

2026-01-21 08:53:09VUE

Vue 实现网站注册登录功能

项目初始化

使用 Vue CLI 创建项目，安装必要依赖（如 Vue Router、Axios）：

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

路由配置

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

import { createRouter, createWebHistory } from 'vue-router'
import Login from '../views/Login.vue'
import Register from '../views/Register.vue'

const routes = [
  { path: '/login', component: Login },
  { path: '/register', component: Register }
]

const router = createRouter({
  history: createWebHistory(),
  routes
})

export default router

注册组件实现

创建 src/views/Register.vue：

<template>
  <form @submit.prevent="handleRegister">
    <input v-model="form.username" placeholder="用户名">
    <input v-model="form.email" type="email" placeholder="邮箱">
    <input v-model="form.password" type="password" placeholder="密码">
    <button type="submit">注册</button>
  </form>
</template>

<script>
import axios from 'axios'

export default {
  data() {
    return {
      form: {
        username: '',
        email: '',
        password: ''
      }
    }
  },
  methods: {
    async handleRegister() {
      try {
        const res = await axios.post('/api/register', this.form)
        localStorage.setItem('token', res.data.token)
        this.$router.push('/dashboard')
      } catch (error) {
        alert(error.response.data.message)
      }
    }
  }
}
</script>

登录组件实现

创建 src/views/Login.vue：

vue实现网站注册登录

<template>
  <form @submit.prevent="handleLogin">
    <input v-model="form.email" type="email" placeholder="邮箱">
    <input v-model="form.password" type="password" placeholder="密码">
    <button type="submit">登录</button>
  </form>
</template>

<script>
import axios from 'axios'

export default {
  data() {
    return {
      form: {
        email: '',
        password: ''
      }
    }
  },
  methods: {
    async handleLogin() {
      try {
        const res = await axios.post('/api/login', this.form)
        localStorage.setItem('token', res.data.token)
        this.$router.push('/dashboard')
      } catch (error) {
        alert(error.response.data.message)
      }
    }
  }
}
</script>

状态管理（可选）

对于复杂应用可引入 Pinia/Vuex：

// stores/auth.js (Pinia示例)
import { defineStore } from 'pinia'

export const useAuthStore = defineStore('auth', {
  state: () => ({
    user: null,
    isAuthenticated: false
  }),
  actions: {
    login(token) {
      this.isAuthenticated = true
      localStorage.setItem('token', token)
    },
    logout() {
      this.isAuthenticated = false
      localStorage.removeItem('token')
    }
  }
})

路由守卫

添加全局前置守卫保护需要认证的路由：

vue实现网站注册登录

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

API 请求拦截

配置 Axios 全局拦截器自动添加 token：

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

后端接口示例

Node.js 基础实现参考：

// 伪代码示例
app.post('/api/register', (req, res) => {
  // 验证输入
  // 创建用户
  // 生成JWT token
  res.json({ token: generatedToken })
})

app.post('/api/login', (req, res) => {
  // 验证凭证
  // 比对密码
  // 生成JWT token
  res.json({ token: generatedToken })
})

表单验证增强

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

<template>
  <Form @submit="handleSubmit">
    <Field name="email" type="email" rules="required|email" />
    <ErrorMessage name="email" />
  </Form>
</template>

<script>
import { Form, Field, ErrorMessage } from 'vee-validate'
export default {
  components: { Form, Field, ErrorMessage }
}
</script>