用vue实现登录

Vue 登录功能实现

使用 Vue 实现登录功能需要结合前端和后端交互，以下是一个完整的实现方案：

创建登录组件

在 Vue 项目中创建一个登录组件，通常命名为 Login.vue：

<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) {
        alert('登录失败: ' + error.response.data.message)
      }
    }
  }
}
</script>

<style scoped>
.login-container {
  max-width: 400px;
  margin: 0 auto;
  padding: 20px;
}
.form-group {
  margin-bottom: 15px;
}
</style>

配置路由

在路由文件中设置登录路由：

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

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/login',
      name: 'login',
      component: Login
    }
  ]
})

安装并配置 Axios

安装 Axios 用于 HTTP 请求：

npm install axios

在 main.js 中全局配置 Axios：

import Vue from 'vue'
import axios from 'axios'

axios.defaults.baseURL = 'http://your-api-domain.com'
Vue.prototype.$axios = axios

添加路由守卫

在路由配置中添加全局前置守卫，保护需要认证的路由：

router.beforeEach((to, from, next) => {
  const isAuthenticated = localStorage.getItem('token')
  if (to.name !== 'login' && !isAuthenticated) {
    next({ name: 'login' })
  } else {
    next()
  }
})

后端 API 交互

确保后端 API 提供登录接口，通常返回 JWT token：

// 伪代码示例
app.post('/api/login', (req, res) => {
  const { username, password } = req.body
  // 验证用户
  if (validUser(username, password)) {
    const token = generateToken(username)
    res.json({ token })
  } else {
    res.status(401).json({ message: '用户名或密码错误' })
  }
})

表单验证增强

可以使用 Vuelidate 进行更复杂的表单验证：

npm install 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.commit('setUser', response.data.user)
      this.$router.push('/dashboard')
    } catch (error) {
      if (error.response) {
        this.errorMessage = error.response.data.message || '登录失败'
      } else {
        this.errorMessage = '网络错误，请稍后重试'
      }
    }
  }
}

状态管理

使用 Vuex 管理用户状态：

// store.js
export default new Vuex.Store({
  state: {
    user: null,
    token: null
  },
  mutations: {
    setUser(state, user) {
      state.user = user
    },
    setToken(state, token) {
      state.token = token
    }
  }
})

记住登录状态

添加"记住我"功能：

<input type="checkbox" id="remember" v-model="rememberMe">
<label for="remember">记住我</label>

methods: {
  handleSubmit() {
    if (this.rememberMe) {
      localStorage.setItem('token', response.data.token)
    } else {
      sessionStorage.setItem('token', response.data.token)
    }
  }
}

社交登录集成

集成 Google 或 GitHub 登录：

methods: {
  loginWithGoogle() {
    window.location.href = 'https://accounts.google.com/o/oauth2/auth?' +
      `client_id=${YOUR_CLIENT_ID}&` +
      'redirect_uri=http://your-app.com/callback&' +
      'response_type=code&' +
      'scope=email profile'
  }
}