当前位置：首页 > VUE

前端登录功能实现vue

2026-02-21 11:54:25VUE

实现前端登录功能（Vue）

环境准备

确保已安装Vue CLI和必要的依赖

npm install -g @vue/cli
vue create login-project
cd login-project
npm install axios vue-router vuex

路由配置

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

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

Vue.use(Router)

const router = new Router({
  routes: [
    {
      path: '/login',
      name: 'Login',
      component: Login
    }
  ]
})

登录组件

创建src/views/Login.vue组件

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

<script>
export default {
  data() {
    return {
      form: {
        username: '',
        password: ''
      }
    }
  },
  methods: {
    async handleSubmit() {
      try {
        const res = await this.$store.dispatch('user/login', this.form)
        this.$router.push('/dashboard')
      } catch (error) {
        alert(error.message)
      }
    }
  }
}
</script>

Vuex状态管理

创建src/store/modules/user.js

import axios from 'axios'

const state = {
  token: localStorage.getItem('token') || '',
  userInfo: {}
}

const mutations = {
  SET_TOKEN(state, token) {
    state.token = token
  },
  SET_USERINFO(state, userInfo) {
    state.userInfo = userInfo
  }
}

const actions = {
  async login({ commit }, form) {
    const response = await axios.post('/api/login', form)
    commit('SET_TOKEN', response.data.token)
    localStorage.setItem('token', response.data.token)
    return response.data
  }
}

export default {
  namespaced: true,
  state,
  mutations,
  actions
}

请求拦截器

在src/utils/request.js中配置axios

import axios from 'axios'

const service = axios.create({
  baseURL: process.env.VUE_APP_BASE_API,
  timeout: 5000
})

service.interceptors.request.use(
  config => {
    const token = localStorage.getItem('token')
    if (token) {
      config.headers['Authorization'] = `Bearer ${token}`
    }
    return config
  },
  error => {
    return Promise.reject(error)
  }
)

export default service

路由守卫

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

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

样式优化

在src/views/Login.vue中添加基础样式

.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;
}

表单验证

使用Vuelidate进行表单验证

npm install vuelidate

在src/views/Login.vue中添加验证

前端登录功能实现vue

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

export default {
  validations: {
    form: {
      username: { required },
      password: { required, minLength: minLength(6) }
    }
  },
  methods: {
    handleSubmit() {
      this.$v.$touch()
      if (this.$v.$invalid) return
      // 提交逻辑...
    }
  }
}