当前位置：首页 > VUE

vue实现登录源码

2026-02-11 01:27:52VUE

Vue 登录功能实现源码解析

以下是一个基于 Vue 2 的登录功能实现示例，包含表单验证、API 请求和状态管理。

登录组件 (Login.vue)

<template>
  <div class="login-container">
    <form @submit.prevent="handleSubmit">
      <div class="form-group">
        <label for="username">用户名</label>
        <input 
          type="text" 
          id="username" 
          v-model="form.username" 
          @blur="validate('username')"
        >
        <span class="error" v-if="errors.username">{{ errors.username }}</span>
      </div>

      <div class="form-group">
        <label for="password">密码</label>
        <input 
          type="password" 
          id="password" 
          v-model="form.password" 
          @blur="validate('password')"
        >
        <span class="error" v-if="errors.password">{{ errors.password }}</span>
      </div>

      <button type="submit" :disabled="isSubmitting">
        {{ isSubmitting ? '登录中...' : '登录' }}
      </button>
    </form>
  </div>
</template>

<script>
import { login } from '@/api/auth'
import { validateEmail, validatePassword } from '@/utils/validate'

export default {
  data() {
    return {
      form: {
        username: '',
        password: ''
      },
      errors: {
        username: '',
        password: ''
      },
      isSubmitting: false
    }
  },
  methods: {
    validate(field) {
      if (field === 'username' && !this.form.username) {
        this.errors.username = '请输入用户名'
      } else if (field === 'password' && !this.form.password) {
        this.errors.password = '请输入密码'
      } else {
        this.errors[field] = ''
      }
    },
    async handleSubmit() {
      // 验证所有字段
      Object.keys(this.form).forEach(field => this.validate(field))

      // 如果有错误则停止提交
      if (Object.values(this.errors).some(err => err)) {
        return
      }

      this.isSubmitting = true
      try {
        const { data } = await login(this.form)
        this.$store.commit('SET_TOKEN', data.token)
        this.$router.push('/dashboard')
      } catch (error) {
        alert(error.response?.data?.message || '登录失败')
      } finally {
        this.isSubmitting = false
      }
    }
  }
}
</script>

<style scoped>
.login-container {
  max-width: 400px;
  margin: 0 auto;
  padding: 20px;
}
.form-group {
  margin-bottom: 15px;
}
.error {
  color: red;
  font-size: 12px;
}
</style>

API 请求模块 (auth.js)

import axios from 'axios'

export const login = (data) => {
  return axios.post('/api/login', data)
}

Vuex 状态管理

// store/auth.js
const state = {
  token: localStorage.getItem('token') || ''
}

const mutations = {
  SET_TOKEN(state, token) {
    state.token = token
    localStorage.setItem('token', token)
  },
  CLEAR_TOKEN(state) {
    state.token = ''
    localStorage.removeItem('token')
  }
}

const actions = {
  login({ commit }, credentials) {
    return login(credentials).then(response => {
      commit('SET_TOKEN', response.data.token)
    })
  },
  logout({ commit }) {
    commit('CLEAR_TOKEN')
  }
}

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

路由配置

// router.js
import Vue from 'vue'
import Router from 'vue-router'
import Login from './views/Login.vue'
import Dashboard from './views/Dashboard.vue'

Vue.use(Router)

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

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

export default router

验证工具函数

// utils/validate.js
export function validateEmail(email) {
  const re = /^[^\s@]+@[^\s@]+\.[^\s@]+$/
  return re.test(email)
}

export function validatePassword(password) {
  return password.length >= 6
}