当前位置：首页 > VUE

vue登录实现

2026-03-07 09:23:09VUE

Vue 登录功能实现

在 Vue 中实现登录功能通常涉及前端页面设计、表单验证、API 调用和状态管理。以下是关键步骤和代码示例：

创建登录表单组件

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

<script>
export default {
  data() {
    return {
      form: {
        username: '',
        password: ''
      }
    }
  },
  methods: {
    handleSubmit() {
      this.$emit('submit', this.form)
    }
  }
}
</script>

表单验证

使用 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) {
        this.$emit('submit', this.form)
      }
    }
  }
}

发送登录请求

使用 axios 发送登录请求：

import axios from 'axios'

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) {
      console.error('登录失败:', error)
    }
  }
}

状态管理

使用 Vuex 管理登录状态：

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

const mutations = {
  SET_USER(state, user) {
    state.user = user
  },
  SET_TOKEN(state, token) {
    state.token = token
    localStorage.setItem('token', token)
  },
  LOGOUT(state) {
    state.user = null
    state.token = null
    localStorage.removeItem('token')
  }
}

const actions = {
  async login({ commit }, credentials) {
    const response = await axios.post('/api/login', credentials)
    commit('SET_TOKEN', response.data.token)
    commit('SET_USER', response.data.user)
  }
}

路由守卫

设置路由守卫保护需要认证的路由：

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

响应拦截

设置 axios 响应拦截器处理 token 过期：

axios.interceptors.response.use(
  response => response,
  error => {
    if (error.response.status === 401) {
      store.dispatch('auth/logout')
      router.push('/login')
    }
    return Promise.reject(error)
  }
)

全局请求头

设置 axios 请求拦截器添加 token：

vue登录实现

axios.interceptors.request.use(config => {
  const token = store.state.auth.token
  if (token) {
    config.headers.Authorization = `Bearer ${token}`
  }
  return config
})

以上实现涵盖了 Vue 登录功能的主要方面，可根据具体需求进行调整和扩展。

标签: vue