用vue实现登陆

实现登录功能的基本步骤

安装Vue及相关依赖 确保已安装Vue CLI，通过npm install -g @vue/cli安装最新版本。创建新项目使用vue create project-name命令。

创建登录组件 在src/components目录下新建Login.vue文件。该组件包含表单元素，用于输入用户名和密码，并绑定到Vue的data属性。

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

<script>
export default {
  data() {
    return {
      username: '',
      password: ''
    }
  },
  methods: {
    handleLogin() {
      // 登录逻辑
    }
  }
}
</script>

添加表单验证

安装VeeValidate 通过npm install vee-validate安装表单验证库。在main.js中引入并配置基本规则。

import { Form, Field, ErrorMessage, defineRule } from 'vee-validate'
import { required, email } from '@vee-validate/rules'

defineRule('required', required)
defineRule('email', email)

app.component('Form', Form)
app.component('Field', Field)
app.component('ErrorMessage', ErrorMessage)

更新登录组件 使用VeeValidate组件替换原生表单元素，并添加验证规则。

<template>
  <Form @submit="handleLogin">
    <Field name="email" type="email" :rules="validateEmail" />
    <ErrorMessage name="email" />

    <Field name="password" type="password" rules="required" />
    <ErrorMessage name="password" />

    <button type="submit">登录</button>
  </Form>
</template>

<script>
export default {
  methods: {
    validateEmail(value) {
      const regex = /^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}$/i
      return regex.test(value) || '请输入有效的邮箱地址'
    },
    handleLogin(values) {
      // 验证通过后的处理
    }
  }
}
</script>

处理登录请求

安装Axios 通过npm install axios安装HTTP客户端。创建api服务文件集中管理请求。

// src/services/auth.js
import axios from 'axios'

const api = axios.create({
  baseURL: 'https://your-api-endpoint.com/api'
})

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

更新登录方法 在组件中调用auth服务处理登录请求，并处理响应。

<script>
import authService from '../services/auth'

export default {
  methods: {
    async handleLogin(values) {
      try {
        const response = await authService.login(values)
        localStorage.setItem('token', response.data.token)
        this.$router.push('/dashboard')
      } catch (error) {
        alert('登录失败: ' + error.response.data.message)
      }
    }
  }
}
</script>

添加路由保护

配置Vue Router 安装路由npm install vue-router，创建路由配置文件。

// src/router/index.js
import { createRouter, createWebHistory } from 'vue-router'
import Login from '../components/Login.vue'
import Dashboard from '../components/Dashboard.vue'

const routes = [
  { path: '/login', component: Login },
  { 
    path: '/dashboard', 
    component: Dashboard,
    meta: { requiresAuth: true }
  }
]

const router = createRouter({
  history: createWebHistory(),
  routes
})

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

export default router

状态管理

使用Vuex管理登录状态 安装Vuexnpm install vuex，创建store管理用户状态。

// src/store/index.js
import { createStore } from 'vuex'

export default createStore({
  state: {
    user: null,
    isAuthenticated: false
  },
  mutations: {
    SET_USER(state, user) {
      state.user = user
      state.isAuthenticated = true
    },
    LOGOUT(state) {
      state.user = null
      state.isAuthenticated = false
    }
  },
  actions: {
    login({ commit }, credentials) {
      return authService.login(credentials)
        .then(response => {
          commit('SET_USER', response.data.user)
          localStorage.setItem('token', response.data.token)
        })
    },
    logout({ commit }) {
      commit('LOGOUT')
      localStorage.removeItem('token')
    }
  }
})

更新登录组件 使用store的action处理登录，替代直接调用服务。

<script>
import { mapActions } from 'vuex'

export default {
  methods: {
    ...mapActions(['login']),
    async handleLogin(values) {
      try {
        await this.login(values)
        this.$router.push('/dashboard')
      } catch (error) {
        alert('登录失败: ' + error.response.data.message)
      }
    }
  }
}
</script>