当前位置：首页 > VUE

vue前端实现登录

2026-01-07 01:26:37VUE

实现登录功能的基本流程

使用Vue实现登录功能需要结合前端框架和后端API交互。以下是一个典型的实现方案：

安装必要依赖

确保项目已安装axios用于HTTP请求：

npm install axios

创建登录组件

在Vue组件中创建登录表单：

<template>
  <div class="login-container">
    <form @submit.prevent="handleSubmit">
      <input v-model="form.username" type="text" placeholder="用户名"/>
      <input v-model="form.password" type="password" placeholder="密码"/>
      <button type="submit">登录</button>
    </form>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      form: {
        username: '',
        password: ''
      }
    }
  },
  methods: {
    async handleSubmit() {
      try {
        const response = await axios.post('/api/login', this.form);
        localStorage.setItem('token', response.data.token);
        this.$router.push('/dashboard');
      } catch (error) {
        alert('登录失败');
      }
    }
  }
}
</script>

配置路由守卫

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

import Vue from 'vue'
import Router from 'vue-router'
import store from '../store'

Vue.use(Router)

const router = new Router({
  routes: [
    { path: '/login', component: () => import('@/views/Login.vue') },
    { path: '/dashboard', component: () => import('@/views/Dashboard.vue'), meta: { requiresAuth: true } }
  ]
})

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

export default router

状态管理（可选）

对于复杂应用，可以使用Vuex管理登录状态：

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

const mutations = {
  AUTH_REQUEST(state) {
    state.status = 'loading'
  },
  AUTH_SUCCESS(state, token) {
    state.status = 'success'
    state.token = token
  },
  AUTH_ERROR(state) {
    state.status = 'error'
  },
  LOGOUT(state) {
    state.token = ''
  }
}

const actions = {
  login({ commit }, userData) {
    return new Promise((resolve, reject) => {
      commit('AUTH_REQUEST')
      axios.post('/api/login', userData)
        .then(resp => {
          const token = resp.data.token
          localStorage.setItem('token', token)
          commit('AUTH_SUCCESS', token)
          resolve(resp)
        })
        .catch(err => {
          commit('AUTH_ERROR')
          localStorage.removeItem('token')
          reject(err)
        })
    })
  },
  logout({ commit }) {
    return new Promise((resolve) => {
      commit('LOGOUT')
      localStorage.removeItem('token')
      resolve()
    })
  }
}

export default {
  state,
  mutations,
  actions
}

错误处理和表单验证

添加基本的表单验证：

<template>
  <form @submit.prevent="handleSubmit">
    <input v-model="form.username" required minlength="3"/>
    <input v-model="form.password" required minlength="6"/>
    <span v-if="error" class="error-message">{{ error }}</span>
  </form>
</template>

<script>
export default {
  data() {
    return {
      error: ''
    }
  },
  methods: {
    validateForm() {
      if (!this.form.username || !this.form.password) {
        this.error = '请填写完整信息'
        return false
      }
      return true
    },
    async handleSubmit() {
      if (!this.validateForm()) return
      // 提交逻辑...
    }
  }
}
</script>

安全注意事项

使用HTTPS协议传输数据
密码字段应使用v-model.lazy减少内存驻留时间
考虑实现CSRF保护
登录成功后立即清除表单数据
使用HTTP-only的Cookie存储token更安全

响应式设计优化

添加加载状态和更好的用户体验：

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

<script>
export default {
  data() {
    return {
      loading: false
    }
  },
  methods: {
    async handleSubmit() {
      this.loading = true
      try {
        // 登录逻辑
      } finally {
        this.loading = false
      }
    }
  }
}
</script>

vue前端实现登录