vue-cli实现登录

vue-cli 实现登录功能

创建登录组件

在 src/components 目录下创建 Login.vue 文件，包含表单和基础样式：

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

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

配置路由

在 src/router/index.js 中添加登录路由：

import Login from '@/components/Login'

const routes = [
  {
    path: '/login',
    name: 'Login',
    component: Login
  }
]

实现认证逻辑

创建 src/services/auth.js 处理认证逻辑：

export default {
  login(credentials) {
    return axios.post('/api/login', credentials)
  },
  logout() {
    return axios.post('/api/logout')
  }
}

状态管理

在 Vuex store (src/store/index.js) 中管理登录状态：

const store = new Vuex.Store({
  state: {
    isAuthenticated: false,
    user: null
  },
  mutations: {
    SET_AUTH(state, payload) {
      state.isAuthenticated = payload.isAuthenticated
      state.user = payload.user
    }
  },
  actions: {
    async login({ commit }, credentials) {
      try {
        const response = await authService.login(credentials)
        commit('SET_AUTH', {
          isAuthenticated: true,
          user: response.data.user
        })
        router.push('/dashboard')
      } catch (error) {
        console.error('Login failed:', error)
      }
    }
  }
})

路由守卫

在 src/router/index.js 中添加全局前置守卫：

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

表单验证

为登录表单添加基础验证：

<template>
  <form @submit.prevent="handleSubmit">
    <div v-if="errors.length">
      <p v-for="error in errors" :key="error">{{ error }}</p>
    </div>
    <!-- 表单内容 -->
  </form>
</template>

<script>
export default {
  data() {
    return {
      errors: []
    }
  },
  methods: {
    validateForm() {
      this.errors = []
      if (!this.username) this.errors.push('用户名必填')
      if (!this.password) this.errors.push('密码必填')
      return this.errors.length === 0
    },
    handleSubmit() {
      if (this.validateForm()) {
        this.$emit('login', {
          username: this.username,
          password: this.password
        })
      }
    }
  }
}
</script>

样式优化

添加基础样式增强用户体验：

.login-container {
  max-width: 400px;
  margin: 0 auto;
  padding: 20px;
}

input {
  display: block;
  width: 100%;
  margin-bottom: 10px;
  padding: 8px;
}

button {
  width: 100%;
  padding: 10px;
  background-color: #42b983;
  color: white;
  border: none;
}