当前位置：首页 > VUE

vue 实现简单登录

2026-03-09 14:48:38VUE

Vue 实现简单登录功能

1. 创建 Vue 项目 使用 Vue CLI 快速搭建项目框架：

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

2. 构建登录组件 在 src/components/Login.vue 中创建登录表单：

<template>
  <div class="login">
    <h3>用户登录</h3>
    <form @submit.prevent="handleLogin">
      <input v-model="username" placeholder="用户名" required>
      <input v-model="password" type="password" placeholder="密码" required>
      <button type="submit">登录</button>
    </form>
    <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 this.$http.post('/api/login', {
          username: this.username,
          password: this.password
        })
        localStorage.setItem('token', response.data.token)
        this.$router.push('/dashboard')
      } catch (err) {
        this.error = '登录失败，请检查用户名和密码'
      }
    }
  }
}
</script>

3. 配置路由 在 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', component: Login },
    { path: '/dashboard', component: Dashboard, meta: { requiresAuth: true } }
  ]
})

4. 添加请求拦截器 在 src/main.js 中配置 axios：

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import axios from 'axios'

axios.defaults.baseURL = 'http://your-api-domain.com'
Vue.prototype.$http = axios

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

new Vue({
  router,
  render: h => h(App)
}).$mount('#app')

5. 创建受保护页面 在 src/components/Dashboard.vue 中：

<template>
  <div>
    <h3>欢迎来到仪表盘</h3>
    <button @click="handleLogout">退出登录</button>
  </div>
</template>

<script>
export default {
  methods: {
    handleLogout() {
      localStorage.removeItem('token')
      this.$router.push('/login')
    }
  }
}
</script>

6. 样式优化 在 src/App.vue 中添加基础样式：

<style>
.login {
  max-width: 300px;
  margin: 0 auto;
  padding: 20px;
}
input {
  display: block;
  width: 100%;
  margin: 10px 0;
  padding: 8px;
}
.error {
  color: red;
}
</style>

7. 后端接口示例 Node.js 简单登录验证示例：

app.post('/api/login', (req, res) => {
  const { username, password } = req.body
  if (username === 'admin' && password === '123456') {
    res.json({ token: 'fake-jwt-token' })
  } else {
    res.status(401).send('认证失败')
  }
})

8. 表单验证增强 使用 Vuelidate 进行客户端验证：

npm install vuelidate

在组件中添加：

vue 实现简单登录

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

export default {
  validations: {
    username: { required },
    password: { required, minLength: minLength(6) }
  },
  methods: {
    handleLogin() {
      this.$v.$touch()
      if (this.$v.$invalid) return
      // 继续登录逻辑
    }
  }
}

以上实现包含前端界面、路由保护、Token 存储和基础验证功能，可根据实际需求扩展更多特性如记住密码、验证码等功能。