当前位置：首页 > VUE

vue登录的实现

2026-02-17 20:04:39VUE

Vue 登录功能实现

前端实现（Vue 3 + Vue Router + Pinia/Axios）

安装必要依赖：

npm install axios vue-router pinia

创建登录组件（Login.vue）：

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

<script setup>
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import { useAuthStore } from '@/stores/auth'
import axios from 'axios'

const router = useRouter()
const authStore = useAuthStore()

const form = ref({
  username: '',
  password: ''
})

const handleSubmit = async () => {
  try {
    const response = await axios.post('/api/login', form.value)
    authStore.setToken(response.data.token)
    router.push('/dashboard')
  } catch (error) {
    alert('登录失败')
  }
}
</script>

创建认证状态管理（stores/auth.js）：

import { defineStore } from 'pinia'

export const useAuthStore = defineStore('auth', {
  state: () => ({
    token: localStorage.getItem('token') || null
  }),
  actions: {
    setToken(token) {
      this.token = token
      localStorage.setItem('token', token)
    },
    clearToken() {
      this.token = null
      localStorage.removeItem('token')
    }
  }
})

配置路由守卫（router/index.js）：

import { createRouter, createWebHistory } from 'vue-router'
import { useAuthStore } from '@/stores/auth'

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

router.beforeEach((to) => {
  const authStore = useAuthStore()
  if (to.meta.requiresAuth && !authStore.token) {
    return '/login'
  }
})

后端实现（Node.js Express示例）

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({ userId: user.id }, 'your-secret-key', { expiresIn: '1h' })
    res.json({ token })
  } else {
    res.status(401).json({ error: '认证失败' })
  }
})

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