vue 实现简单登陆

Vue 实现简单登录功能

创建 Vue 项目

使用 Vue CLI 创建一个新项目：

vue create login-demo

选择默认配置或手动配置（推荐包含 Vue Router 和 Vuex）。

项目结构

src/
├── components/
│   └── LoginForm.vue
├── views/
│   ├── Login.vue
│   └── Home.vue
├── router/
│   └── index.js
├── store/
│   └── index.js
└── App.vue

登录表单组件

在 components/LoginForm.vue 中：

<template>
  <form @submit.prevent="handleSubmit">
    <input v-model="username" placeholder="用户名" required>
    <input v-model="password" type="password" placeholder="密码" required>
    <button type="submit">登录</button>
  </form>
</template>

<script>
export default {
  data() {
    return {
      username: '',
      password: ''
    }
  },
  methods: {
    handleSubmit() {
      this.$emit('login', {
        username: this.username,
        password: this.password
      })
    }
  }
}
</script>

登录页面

在 views/Login.vue 中：

<template>
  <div>
    <h1>登录</h1>
    <LoginForm @login="handleLogin" />
    <p v-if="error" class="error">{{ error }}</p>
  </div>
</template>

<script>
import LoginForm from '@/components/LoginForm.vue'

export default {
  components: { LoginForm },
  data() {
    return {
      error: null
    }
  },
  methods: {
    handleLogin(credentials) {
      this.$store.dispatch('login', credentials)
        .then(() => {
          this.$router.push('/home')
        })
        .catch(error => {
          this.error = error.message
        })
    }
  }
}
</script>

Vuex 状态管理

在 store/index.js 中：

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    isAuthenticated: false,
    user: null
  },
  mutations: {
    SET_AUTH(state, payload) {
      state.isAuthenticated = true
      state.user = payload.user
    }
  },
  actions: {
    login({ commit }, credentials) {
      return new Promise((resolve, reject) => {
        // 模拟 API 调用
        if (credentials.username === 'admin' && credentials.password === '123456') {
          commit('SET_AUTH', { user: credentials.username })
          resolve()
        } else {
          reject(new Error('用户名或密码错误'))
        }
      })
    }
  }
})

路由配置

在 router/index.js 中：

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

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/login',
      name: 'Login',
      component: Login
    },
    {
      path: '/home',
      name: 'Home',
      component: Home,
      meta: { requiresAuth: true }
    },
    {
      path: '*',
      redirect: '/login'
    }
  ]
})

路由守卫

在 main.js 中添加全局前置守卫：

import router from './router'
import store from './store'

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

主页面

在 views/Home.vue 中：

<template>
  <div>
    <h1>欢迎, {{ $store.state.user }}</h1>
    <button @click="logout">退出</button>
  </div>
</template>

<script>
export default {
  methods: {
    logout() {
      this.$store.commit('SET_AUTH', { user: null })
      this.$store.state.isAuthenticated = false
      this.$router.push('/login')
    }
  }
}
</script>

样式增强

可以添加基础样式到 App.vue：

<style>
.error {
  color: red;
}
input {
  display: block;
  margin: 10px 0;
  padding: 8px;
}
button {
  padding: 8px 16px;
}
</style>

运行项目

npm run serve

访问 http://localhost:8080/login 测试登录功能，使用用户名 admin 和密码 123456 可以成功登录并跳转到主页。