前端vue登录功能实现

实现Vue登录功能

创建登录组件

在Vue项目中创建一个Login.vue组件，包含用户名和密码输入框以及提交按钮。使用v-model绑定表单数据。

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

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

设置路由

在router/index.js中配置登录路由，确保未登录用户只能访问登录页面。

import Vue from 'vue'
import Router from 'vue-router'
import Login from '@/views/Login.vue'
import Home from '@/views/Home.vue'

Vue.use(Router)

const router = new Router({
  routes: [
    {
      path: '/login',
      name: 'Login',
      component: Login
    },
    {
      path: '/',
      name: 'Home',
      component: Home,
      meta: { requiresAuth: true }
    }
  ]
})

实现登录逻辑

在Login.vue中添加实际的登录方法，调用后端API验证用户凭证。

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('/')
    } catch (error) {
      alert('登录失败')
    }
  }
}

添加路由守卫

在router/index.js中添加全局前置守卫，检查用户是否已认证。

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

状态管理（可选）

对于大型应用，建议使用Vuex管理登录状态。

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

const mutations = {
  setToken(state, token) {
    state.token = token
    localStorage.setItem('token', token)
  },
  clearToken(state) {
    state.token = null
    localStorage.removeItem('token')
  }
}

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

错误处理和表单验证

添加基本的表单验证和错误提示功能。

data() {
  return {
    username: '',
    password: '',
    error: null
  }
},
methods: {
  async handleLogin() {
    if (!this.username || !this.password) {
      this.error = '请输入用户名和密码'
      return
    }
    try {
      // 登录逻辑
    } catch (error) {
      this.error = '用户名或密码错误'
    }
  }
}

样式优化

为登录表单添加基本样式，提升用户体验。

.login {
  max-width: 400px;
  margin: 0 auto;
  padding: 20px;
}
input {
  display: block;
  width: 100%;
  margin-bottom: 10px;
  padding: 8px;
}
button {
  width: 100%;
  padding: 10px;
  background: #42b983;
  color: white;
  border: none;
}
.error {
  color: red;
  margin-bottom: 10px;
}