当前位置：首页 > VUE

前端vue登录功能实现

2026-02-25 19:12:07VUE

登录功能实现步骤

创建登录页面组件

在Vue项目中创建一个登录页面组件，通常命名为Login.vue。该组件包含表单元素，如用户名和密码输入框，以及提交按钮。

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

<script>
export default {
  data() {
    return {
      username: '',
      password: ''
    }
  },
  methods: {
    handleLogin() {
      // 登录逻辑
    }
  }
}
</script>

配置路由

在Vue Router中配置登录页面的路由，确保用户可以通过URL访问登录页面。

import Login from './views/Login.vue'

const routes = [
  {
    path: '/login',
    name: 'Login',
    component: Login
  }
]

实现登录逻辑

在handleLogin方法中，发送登录请求到后端API，处理响应结果。通常使用Axios进行HTTP请求。

methods: {
  async handleLogin() {
    try {
      const response = await axios.post('/api/login', {
        username: this.username,
        password: this.password
      })
      localStorage.setItem('token', response.data.token)
      this.$router.push('/dashboard')
    } catch (error) {
      alert('登录失败，请检查用户名和密码')
    }
  }
}

状态管理

使用Vuex管理用户登录状态，存储用户信息和token。

const store = new Vuex.Store({
  state: {
    user: null,
    token: null
  },
  mutations: {
    setUser(state, user) {
      state.user = user
    },
    setToken(state, token) {
      state.token = token
    }
  }
})

路由守卫

配置全局路由守卫，检查用户是否已登录，未登录则重定向到登录页面。

router.beforeEach((to, from, next) => {
  const isAuthenticated = localStorage.getItem('token')
  if (to.name !== 'Login' && !isAuthenticated) {
    next({ name: 'Login' })
  } else {
    next()
  }
})

错误处理和反馈

在登录过程中添加错误处理和用户反馈，如显示错误消息或加载状态。

<template>
  <div>
    <p v-if="error" class="error-message">{{ error }}</p>
    <button :disabled="isLoading">
      {{ isLoading ? '登录中...' : '登录' }}
    </button>
  </div>
</template>