vue实现登录

Vue 登录功能实现

使用 Vue 实现登录功能通常涉及前端表单处理、后端 API 调用和状态管理。以下是具体实现方法：

登录表单组件

创建登录表单组件 Login.vue，包含用户名和密码输入框：

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

<script>
export default {
  data() {
    return {
      username: '',
      password: ''
    }
  },
  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('登录失败')
      }
    }
  }
}
</script>

状态管理

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

// store/index.js
import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    user: null,
    isAuthenticated: false
  },
  mutations: {
    SET_USER(state, user) {
      state.user = user
      state.isAuthenticated = !!user
    }
  },
  actions: {
    async login({ commit }, credentials) {
      const response = await axios.post('/api/login', credentials)
      commit('SET_USER', response.data.user)
      localStorage.setItem('token', response.data.token)
    }
  }
})

路由守卫

配置路由守卫保护需要认证的页面：

// router/index.js
import Vue from 'vue'
import Router from 'vue-router'
import store from '../store'

Vue.use(Router)

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

router.beforeEach((to, from, next) => {
  if (to.matched.some(record => record.meta.requiresAuth)) {
    if (!store.state.isAuthenticated) {
      next('/login')
    } else {
      next()
    }
  } else {
    next()
  }
})

响应拦截器

设置 axios 拦截器自动添加认证 token：

// utils/axios.js
import axios from 'axios'

const instance = axios.create({
  baseURL: process.env.VUE_APP_API_URL
})

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

export default instance

表单验证

添加表单验证确保输入符合要求：

methods: {
  validateForm() {
    if (!this.username || !this.password) {
      this.error = '用户名和密码不能为空'
      return false
    }
    if (this.password.length < 6) {
      this.error = '密码长度不能少于6位'
      return false
    }
    return true
  },
  async handleLogin() {
    if (!this.validateForm()) return

    // 登录逻辑
  }
}

记住登录状态

实现记住登录状态功能：

data() {
  return {
    rememberMe: false
  }
},
methods: {
  async handleLogin() {
    // ...登录成功逻辑
    if (this.rememberMe) {
      localStorage.setItem('rememberedUser', this.username)
    }
  },
  mounted() {
    const rememberedUser = localStorage.getItem('rememberedUser')
    if (rememberedUser) {
      this.username = rememberedUser
      this.rememberMe = true
    }
  }
}

错误处理

完善错误处理机制：

methods: {
  async handleLogin() {
    try {
      // 登录请求
    } 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 = '网络错误，请检查连接'
      }
    }
  }
}