vue 实现登录

Vue 实现登录功能

在 Vue 中实现登录功能通常需要结合前端表单验证、后端 API 调用以及状态管理。以下是一个完整的实现方案：

创建登录组件

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

设置 Axios 拦截器

在 main.js 或单独的文件中配置 Axios 拦截器，处理请求和响应：

import axios from 'axios'

const instance = axios.create({
  baseURL: 'http://your-api-domain.com'
})

instance.interceptors.request.use(config => {
  const token = localStorage.getItem('token')
  if (token) {
    config.headers.Authorization = `Bearer ${token}`
  }
  return config
}, error => {
  return Promise.reject(error)
})

instance.interceptors.response.use(response => {
  return response
}, error => {
  if (error.response.status === 401) {
    // 处理未授权情况
    localStorage.removeItem('token')
    router.push('/login')
  }
  return Promise.reject(error)
})

Vue.prototype.$axios = instance

路由守卫配置

在 router.js 中配置路由守卫，保护需要认证的路由：

import Vue from 'vue'
import Router from 'vue-router'

Vue.use(Router)

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

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

export default router

状态管理 (Vuex)

在 store.js 中配置用户状态管理：

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 }, userData) {
      return new Promise((resolve, reject) => {
        // 这里调用API
        commit('setUser', userData)
        resolve()
      })
    },
    logout({ commit }) {
      commit('logout')
      localStorage.removeItem('token')
    }
  }
})

表单验证增强

可以使用 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) {
        // 提交表单
      }
    }
  }
}

错误处理增强

在登录方法中添加更完善的错误处理：

methods: {
  async handleSubmit() {
    try {
      const response = await this.$axios.post('/api/login', this.form)
      localStorage.setItem('token', response.data.token)
      this.$store.dispatch('login', response.data.user)
      this.$router.push('/dashboard')
    } catch (error) {
      if (error.response) {
        switch (error.response.status) {
          case 401:
            this.error = '用户名或密码错误'
            break
          case 500:
            this.error = '服务器错误，请稍后再试'
            break
          default:
            this.error = '登录失败'
        }
      } else {
        this.error = '网络错误，请检查连接'
      }
    }
  }
}

以上方案提供了 Vue 中实现登录功能的完整流程，包括表单处理、API 调用、状态管理和路由保护等关键环节。根据实际项目需求，可以进一步调整和扩展这些基础实现。