vue登录功能实现

实现Vue登录功能

前端实现

创建登录组件 在Vue项目中创建Login.vue组件，包含表单元素用于输入用户名和密码。使用v-model进行双向数据绑定。

<template>
  <div class="login">
    <form @submit.prevent="handleLogin">
      <input v-model="username" type="text" 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>

配置路由 在router/index.js中配置登录路由，确保未认证用户被重定向到登录页面。

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 token = localStorage.getItem('token')
  if (to.matched.some(record => record.meta.requiresAuth) && !token) {
    next('/login')
  } else {
    next()
  }
})

export default router

后端API实现

创建登录接口 使用Node.js Express框架创建登录API端点，处理用户认证并返回JWT令牌。

const express = require('express')
const jwt = require('jsonwebtoken')
const app = express()

app.use(express.json())

const users = [
  { id: 1, username: 'admin', password: 'admin123' }
]

app.post('/api/login', (req, res) => {
  const { username, password } = req.body
  const user = users.find(u => u.username === username && u.password === password)

  if (user) {
    const token = jwt.sign({ id: user.id }, 'secret_key', { expiresIn: '1h' })
    res.json({ token })
  } else {
    res.status(401).json({ message: '用户名或密码错误' })
  }
})

app.listen(3000, () => console.log('服务器运行在3000端口'))

状态管理

使用Vuex管理登录状态 创建store模块管理用户认证状态和令牌。

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

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    token: localStorage.getItem('token') || '',
    user: null
  },
  mutations: {
    setToken(state, token) {
      state.token = token
      localStorage.setItem('token', token)
    },
    clearToken(state) {
      state.token = ''
      localStorage.removeItem('token')
    }
  },
  actions: {
    login({ commit }, { username, password }) {
      return axios.post('/api/login', { username, password })
        .then(response => {
          commit('setToken', response.data.token)
          return response
        })
    },
    logout({ commit }) {
      commit('clearToken')
    }
  }
})

安全增强

添加axios拦截器 配置axios在每次请求时自动添加认证令牌。

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
}, error => {
  return Promise.reject(error)
})

export default instance

表单验证

实现客户端验证 使用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) {
        // 提交表单
      }
    }
  }
}

错误处理

完善错误提示 在前端显示友好的错误信息，处理网络错误和认证失败情况。

methods: {
  async handleLogin() {
    try {
      const response = await this.$axios.post('/api/login', {
        username: this.username,
        password: this.password
      })
      // 登录成功处理
    } catch (error) {
      if (error.response) {
        this.errorMessage = error.response.data.message || '登录失败'
      } else {
        this.errorMessage = '网络错误，请稍后重试'
      }
    }
  }
}