当前位置：首页 > VUE

vue实现登录功能逻辑

2026-02-22 15:45:36VUE

实现登录功能的核心逻辑

在Vue中实现登录功能通常涉及前端表单处理、API请求、状态管理和路由跳转。以下是关键步骤和代码示例：

登录表单组件

创建包含用户名和密码输入框的表单组件，使用v-model进行双向绑定：

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

<script>
export default {
  data() {
    return {
      form: {
        username: '',
        password: ''
      }
    }
  },
  methods: {
    async handleLogin() {
      try {
        await this.$store.dispatch('login', this.form)
        this.$router.push('/dashboard')
      } catch (error) {
        alert('登录失败: ' + error.message)
      }
    }
  }
}
</script>

Vuex状态管理

通过Vuex存储用户状态和实现登录逻辑：

vue实现登录功能逻辑

// store/auth.js
export default {
  state: {
    user: null,
    token: localStorage.getItem('token') || null
  },
  mutations: {
    SET_USER(state, user) {
      state.user = user
    },
    SET_TOKEN(state, token) {
      state.token = token
      localStorage.setItem('token', token)
    },
    CLEAR_AUTH(state) {
      state.user = null
      state.token = null
      localStorage.removeItem('token')
    }
  },
  actions: {
    async login({ commit }, credentials) {
      const response = await axios.post('/api/login', credentials)
      commit('SET_USER', response.data.user)
      commit('SET_TOKEN', response.data.token)
      return response.data
    },
    logout({ commit }) {
      commit('CLEAR_AUTH')
    }
  },
  getters: {
    isAuthenticated: state => !!state.token
  }
}

路由守卫配置

在路由配置中添加导航守卫，保护需要认证的路由：

// router/index.js
router.beforeEach((to, from, next) => {
  if (to.matched.some(record => record.meta.requiresAuth)) {
    if (!store.getters.isAuthenticated) {
      next({ path: '/login', query: { redirect: to.fullPath } })
    } else {
      next()
    }
  } else {
    next()
  }
})

API请求拦截

在axios全局配置中添加请求拦截器，自动附加token：

vue实现登录功能逻辑

// utils/axios.js
axios.interceptors.request.use(config => {
  const token = store.state.auth.token
  if (token) {
    config.headers.Authorization = `Bearer ${token}`
  }
  return config
}, error => {
  return Promise.reject(error)
})

错误处理

处理常见的登录错误情况，如网络错误或凭证无效：

// 在登录action中添加错误处理
async login({ commit }, credentials) {
  try {
    const response = await axios.post('/api/login', credentials)
    commit('SET_USER', response.data.user)
    commit('SET_TOKEN', response.data.token)
    return response.data
  } catch (error) {
    if (error.response) {
      throw new Error(error.response.data.message || '登录失败')
    } else {
      throw new Error('网络错误，请检查连接')
    }
  }
}

响应式UI反馈

使用加载状态和错误提示增强用户体验：

<template>
  <form @submit.prevent="handleLogin">
    <div v-if="error" class="error-message">{{ error }}</div>
    <input v-model="form.username" :disabled="loading">
    <input v-model="form.password" :disabled="loading">
    <button type="submit" :disabled="loading">
      {{ loading ? '登录中...' : '登录' }}
    </button>
  </form>
</template>

<script>
export default {
  data() {
    return {
      loading: false,
      error: null
    }
  },
  methods: {
    async handleLogin() {
      this.loading = true
      this.error = null
      try {
        await this.$store.dispatch('login', this.form)
        this.$router.push(this.$route.query.redirect || '/dashboard')
      } catch (error) {
        this.error = error.message
      } finally {
        this.loading = false
      }
    }
  }
}
</script>