当前位置：首页 > VUE

vue登录功能的实现

2026-02-25 01:50:25VUE

Vue 登录功能实现

前端实现

创建登录表单组件 使用 Vue 的单文件组件结构，包含用户名和密码输入框、提交按钮及错误提示区域。

<template>
  <div class="login-form">
    <input v-model="username" placeholder="用户名" type="text">
    <input v-model="password" placeholder="密码" type="password">
    <button @click="handleLogin">登录</button>
    <p v-if="error" class="error">{{ error }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      username: '',
      password: '',
      error: ''
    }
  },
  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 (err) {
        this.error = err.response.data.message || '登录失败'
      }
    }
  }
}
</script>

路由配置 在路由文件中设置登录页和需要认证的页面，使用导航守卫进行权限控制。

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', component: Login },
    { path: '/dashboard', component: Dashboard, meta: { requiresAuth: true } }
  ]
})

router.beforeEach((to, from, next) => {
  if (to.matched.some(record => record.meta.requiresAuth)) {
    const token = localStorage.getItem('token')
    if (!token) {
      next('/login')
    } else {
      next()
    }
  } else {
    next()
  }
})

export default router

后端API实现

Express.js 示例 创建一个简单的登录API端点，验证用户凭据并返回JWT令牌。

const express = require('express')
const jwt = require('jsonwebtoken')
const bodyParser = require('body-parser')
const app = express()

app.use(bodyParser.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({ message: '无效的用户名或密码' })
  }
})

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