当前位置：首页 > VUE

vue实现登录网页

2026-01-19 02:45:52VUE

实现登录页面的步骤

前端部分使用Vue.js框架

创建Vue项目并安装必要依赖：

vue create login-page
cd login-page
npm install axios vue-router

构建登录表单组件

在src/components/Login.vue中创建登录表单：

<template>
  <div class="login-container">
    <h2>用户登录</h2>
    <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>
import axios from 'axios';

export default {
  data() {
    return {
      form: {
        username: '',
        password: ''
      }
    }
  },
  methods: {
    async handleSubmit() {
      try {
        const response = await 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;
}
label {
  display: block;
  margin-bottom: 5px;
}
input {
  width: 100%;
  padding: 8px;
  box-sizing: border-box;
}
button {
  background-color: #42b983;
  color: white;
  padding: 10px 15px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}
</style>

配置路由

在src/router/index.js中设置路由：

import Vue from 'vue'
import Router from 'vue-router'
import Login from '../components/Login.vue'
import Dashboard from '../components/Dashboard.vue'

Vue.use(Router)

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

添加路由守卫

在src/main.js中添加全局路由守卫：

vue实现登录网页

import router from './router'

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

后端API接口

示例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({ message: '用户名或密码错误' })
  }
})

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

跨域处理

在Vue项目的vue.config.js中配置代理：

module.exports = {
  devServer: {
    proxy: {
      '/api': {
        target: 'http://localhost:3000',
        changeOrigin: true,
        pathRewrite: {
          '^/api': ''
        }
      }
    }
  }
}

功能完善建议

表单验证增强

vue实现登录网页

使用Vuelidate或VeeValidate进行更全面的表单验证：

import { required, minLength } from 'vuelidate/lib/validators'

export default {
  validations: {
    form: {
      username: { required },
      password: { required, minLength: minLength(6) }
    }
  }
}

登录状态管理

使用Vuex管理全局登录状态：

// store/index.js
export default new Vuex.Store({
  state: {
    isAuthenticated: false,
    user: null
  },
  mutations: {
    loginSuccess(state, user) {
      state.isAuthenticated = true
      state.user = user
    },
    logout(state) {
      state.isAuthenticated = false
      state.user = null
    }
  }
})

安全增强

实现以下安全措施：