vue项目登录实现

实现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) {
        console.error('登录失败', error)
      }
    }
  }
}
</script>

状态管理集成

使用Vuex管理用户登录状态

// store/modules/auth.js
const state = {
  user: null,
  isAuthenticated: false
}

const mutations = {
  SET_USER(state, user) {
    state.user = user
    state.isAuthenticated = !!user
  }
}

const 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)
    return response.data.user
  }
}

路由守卫配置

添加路由守卫保护需要认证的页面

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

JWT验证处理

在axios拦截器中添加token验证

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

axios.interceptors.response.use(response => {
  return response
}, error => {
  if (error.response.status === 401) {
    store.dispatch('logout')
    router.push('/login')
  }
  return Promise.reject(error)
})

表单验证增强

使用Vuelidate进行表单验证

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

export default {
  data() {
    return {
      username: '',
      password: ''
    }
  },
  validations: {
    username: { required },
    password: { required, minLength: minLength(6) }
  },
  methods: {
    handleLogin() {
      this.$v.$touch()
      if (!this.$v.$invalid) {
        // 提交表单
      }
    }
  }
}

第三方登录集成

添加Google或GitHub等第三方登录

// 使用Firebase实现Google登录
import firebase from 'firebase/app'
import 'firebase/auth'

methods: {
  async signInWithGoogle() {
    const provider = new firebase.auth.GoogleAuthProvider()
    try {
      const result = await firebase.auth().signInWithPopup(provider)
      const token = await result.user.getIdToken()
      // 将token发送到后端验证
    } catch (error) {
      console.error('第三方登录失败', error)
    }
  }
}