当前位置：首页 > VUE

vue实现首页登录

2026-02-19 20:53:05VUE

实现首页登录功能

在Vue中实现首页登录功能，通常需要创建登录表单、处理用户输入、验证数据并发送到后端进行认证。以下是一个完整的实现方案：

创建登录组件

新建一个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" 
          required
        />
      </div>

      <div class="form-group">
        <label for="password">密码</label>
        <input 
          type="password" 
          id="password" 
          v-model="form.password" 
          required
        />
      </div>

      <button type="submit">登录</button>
    </form>
  </div>
</template>

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

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

添加表单验证

可以使用Vuelidate或其他验证库来增强表单验证：

import { required, minLength } from 'vuelidate/lib/validators'

export default {
  data() {
    return {
      form: {
        username: '',
        password: ''
      }
    }
  },
  validations: {
    form: {
      username: { required },
      password: { required, minLength: minLength(6) }
    }
  },
  methods: {
    handleSubmit() {
      this.$v.$touch()
      if (!this.$v.$invalid) {
        this.login()
      }
    }
  }
}

实现登录逻辑

添加实际的登录方法，通常需要调用API接口：

methods: {
  async login() {
    try {
      const response = await axios.post('/api/login', this.form)
      localStorage.setItem('token', response.data.token)
      this.$router.push('/dashboard')
    } catch (error) {
      alert('登录失败: ' + error.response.data.message)
    }
  }
}

路由配置

在路由配置中添加登录路由：

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

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

添加导航守卫

为了保护需要认证的页面，可以添加全局前置守卫：

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

状态管理（可选）

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

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

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

const actions = {
  login({ commit }, credentials) {
    return axios.post('/api/login', credentials)
      .then(response => {
        commit('SET_TOKEN', response.data.token)
        return response
      })
  }
}

响应式导航栏

根据登录状态显示不同的导航项：

<template>
  <nav>
    <router-link to="/">首页</router-link>
    <router-link v-if="!isAuthenticated" to="/login">登录</router-link>
    <button v-else @click="logout">退出</button>
  </nav>
</template>

<script>
import { mapState, mapActions } from 'vuex'

export default {
  computed: {
    ...mapState('auth', ['isAuthenticated'])
  },
  methods: {
    ...mapActions('auth', ['logout'])
  }
}
</script>

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

vue实现首页登录