当前位置：首页 > VUE

vue登录怎么实现

2026-02-19 21:43:39VUE

Vue 登录功能实现

前端部分（Vue.js）

创建登录表单组件
使用 Vue 的模板语法构建登录表单，包含用户名和密码输入框以及提交按钮。

<template>
  <div class="login-form">
    <h2>登录</h2>
    <form @submit.prevent="handleLogin">
      <div class="form-group">
        <label for="username">用户名</label>
        <input type="text" id="username" v-model="username" required />
      </div>
      <div class="form-group">
        <label for="password">密码</label>
        <input type="password" id="password" v-model="password" required />
      </div>
      <button type="submit">登录</button>
    </form>
  </div>
</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) {
        alert('登录失败，请检查用户名和密码')
      }
    }
  }
}
</script>

配置路由
在 Vue Router 中设置登录页面的路由，并添加导航守卫以保护需要认证的页面。

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

export default router

后端部分（Node.js示例）

创建登录API接口
使用 Express 框架创建处理登录请求的接口，验证用户凭据并返回 JWT 令牌。

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

app.use(express.json())

const users = [
  {
    id: 1,
    username: 'admin',
    password: '$2b$10$examplehash' // bcrypt加密后的密码
  }
]

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

  if (!user) {
    return res.status(400).json({ message: '用户不存在' })
  }

  const isPasswordValid = await bcrypt.compare(password, user.password)
  if (!isPasswordValid) {
    return res.status(400).json({ message: '密码错误' })
  }

  const token = jwt.sign({ id: user.id }, 'your-secret-key', { expiresIn: '1h' })
  res.json({ token })
})

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