当前位置：首页 > VUE

vue框架实现登录

2026-02-17 03:20:19VUE

Vue 框架实现登录功能

项目初始化与依赖安装

使用 Vue CLI 创建项目并安装必要依赖（如 Vue Router、Axios）：

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

路由配置

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

import Vue from 'vue'
import Router from 'vue-router'
import Login from '../views/Login.vue'

Vue.use(Router)

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

登录页面组件

创建 src/views/Login.vue 文件：

<template>
  <div class="login-container">
    <h2>用户登录</h2>
    <form @submit.prevent="handleSubmit">
      <input v-model="username" placeholder="用户名" required>
      <input v-model="password" type="password" placeholder="密码" required>
      <button type="submit">登录</button>
    </form>
    <p v-if="errorMessage" class="error">{{ errorMessage }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      username: '',
      password: '',
      errorMessage: ''
    }
  },
  methods: {
    async handleSubmit() {
      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 (error) {
        this.errorMessage = '登录失败，请检查凭证'
      }
    }
  }
}
</script>

<style scoped>
.login-container {
  max-width: 300px;
  margin: 0 auto;
}
.error {
  color: red;
}
</style>

全局 HTTP 配置

在 src/main.js 中配置 Axios：

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

Vue.prototype.$http = axios.create({
  baseURL: 'http://your-api-domain.com'
})

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

路由守卫设置

在 src/router/index.js 中添加导航守卫：

router.beforeEach((to, from, next) => {
  const isAuthenticated = localStorage.getItem('token')
  if (to.name !== 'Login' && !isAuthenticated) {
    next({ name: 'Login' })
  } else {
    next()
  }
})

表单验证增强

可引入 Vuelidate 进行客户端验证：

npm install vuelidate

在组件中添加验证规则：

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

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

响应式布局优化

使用 CSS Flexbox 或 Grid 改善登录表单布局：

.login-container {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 2rem;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}