vue登录注册实现

实现登录注册功能

在Vue中实现登录注册功能通常需要结合前端页面和后端API交互。以下是具体实现方法：

前端页面结构

创建两个组件分别用于登录和注册：

<template>
  <div class="auth-container">
    <form @submit.prevent="handleSubmit">
      <input v-model="form.username" placeholder="用户名"/>
      <input v-model="form.password" type="password" placeholder="密码"/>
      <button type="submit">{{ isLogin ? '登录' : '注册' }}</button>
    </form>
    <p @click="toggleMode">{{ isLogin ? '没有账号？立即注册' : '已有账号？立即登录' }}</p>
  </div>
</template>

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

后端API交互

使用axios与后端API通信：

// 在src/utils/request.js中配置axios实例
import axios from 'axios'

const service = axios.create({
  baseURL: process.env.VUE_APP_BASE_API,
  timeout: 5000
})

// 请求拦截器
service.interceptors.request.use(
  config => {
    const token = localStorage.getItem('token')
    if (token) {
      config.headers['Authorization'] = `Bearer ${token}`
    }
    return config
  },
  error => {
    return Promise.reject(error)
  }
)

// 响应拦截器
service.interceptors.response.use(
  response => {
    return response.data
  },
  error => {
    return Promise.reject(error)
  }
)

export default service

路由配置

在router.js中配置路由守卫：

import Vue from 'vue'
import Router from 'vue-router'
import Home from './views/Home.vue'
import Auth from './views/Auth.vue'

Vue.use(Router)

const router = new Router({
  routes: [
    {
      path: '/',
      name: 'home',
      component: Home,
      meta: { requiresAuth: true }
    },
    {
      path: '/auth',
      name: 'auth',
      component: Auth
    }
  ]
})

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

export default router

表单验证

使用Vuelidate进行表单验证：

import { required, minLength } from 'vuelidate/lib/validators'

export default {
  validations: {
    form: {
      username: { required },
      password: { required, minLength: minLength(6) }
    }
  },
  methods: {
    handleSubmit() {
      this.$v.$touch()
      if (this.$v.$invalid) return
      // 提交逻辑
    }
  }
}

状态管理

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

// store/modules/user.js
const state = {
  token: localStorage.getItem('token') || '',
  userInfo: null
}

const mutations = {
  SET_TOKEN(state, token) {
    state.token = token
    localStorage.setItem('token', token)
  },
  SET_USER_INFO(state, info) {
    state.userInfo = info
  }
}

const actions = {
  async login({ commit }, credentials) {
    const res = await axios.post('/api/login', credentials)
    commit('SET_TOKEN', res.data.token)
    return res
  },
  async register({ commit }, credentials) {
    const res = await axios.post('/api/register', credentials)
    commit('SET_TOKEN', res.data.token)
    return res
  }
}

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

以上代码实现了Vue中的基本登录注册功能，包括页面交互、API请求、路由守卫和状态管理。实际项目中需要根据具体需求调整和完善。