vue登录实现

Vue 登录功能实现

登录页面组件

创建一个 Login.vue 组件，包含表单和提交逻辑：

<template>
  <div class="login-container">
    <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: {
    async handleLogin() {
      try {
        const response = await this.$axios.post('/api/login', {
          username: this.username,
          password: this.password
        })
        localStorage.setItem('token', response.data.token)
        this.$router.push('/dashboard')
      } catch (error) {
        console.error('登录失败:', error)
      }
    }
  }
}
</script>

路由配置

在路由文件中设置登录路由和受保护路由：

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

Vue.use(Router)

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

路由守卫

添加全局前置守卫检查用户是否已登录：

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

状态管理（可选）

使用 Vuex 管理用户登录状态：

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    user: null,
    isAuthenticated: false
  },
  mutations: {
    setUser(state, user) {
      state.user = user
      state.isAuthenticated = true
    },
    logout(state) {
      state.user = null
      state.isAuthenticated = false
    }
  },
  actions: {
    login({ commit }, credentials) {
      return axios.post('/api/login', credentials)
        .then(response => {
          commit('setUser', response.data.user)
          localStorage.setItem('token', response.data.token)
        })
    },
    logout({ commit }) {
      localStorage.removeItem('token')
      commit('logout')
    }
  }
})

登录表单验证

添加表单验证功能：

methods: {
  validateForm() {
    if (!this.username) {
      this.error = '请输入用户名'
      return false
    }
    if (!this.password) {
      this.error = '请输入密码'
      return false
    }
    return true
  },
  async handleLogin() {
    if (!this.validateForm()) return

    // 登录逻辑...
  }
}

错误处理

完善错误处理机制：

async handleLogin() {
  try {
    const response = await this.$axios.post('/api/login', {
      username: this.username,
      password: this.password
    })

    if (response.data.success) {
      localStorage.setItem('token', response.data.token)
      this.$store.commit('setUser', response.data.user)
      this.$router.push('/dashboard')
    } else {
      this.error = response.data.message || '登录失败'
    }
  } catch (error) {
    this.error = error.response?.data?.message || '服务器错误'
  }
}

登录状态持久化

在应用初始化时检查登录状态：

new Vue({
  created() {
    const token = localStorage.getItem('token')
    if (token) {
      this.$store.dispatch('checkAuth', token)
    }
  }
})

登出功能

实现登出功能：

methods: {
  logout() {
    this.$store.dispatch('logout')
    this.$router.push('/login')
  }
}

以上实现涵盖了 Vue 登录功能的主要方面，包括表单处理、路由保护、状态管理和错误处理。根据具体需求可以进一步调整和扩展。