当前位置：首页 > VUE

vue 实现登录

2026-01-13 02:05:14VUE

Vue 实现登录功能

登录页面组件

创建一个 Login.vue 文件，包含表单和基础验证逻辑：

<template>
  <div class="login-container">
    <form @submit.prevent="handleLogin">
      <input v-model="username" type="text" 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 handleLogin() {
      try {
        const response = await this.$axios.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>

路由配置

在 router/index.js 中配置登录路由和权限控制：

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

Vue.use(Router)

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

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

export default router

Axios 拦截器

在 main.js 中设置请求拦截器自动添加 token：

import axios from 'axios'

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

状态管理（可选）

对于复杂应用可以使用 Vuex 管理登录状态：

// store/index.js
export default new Vuex.Store({
  state: {
    user: null,
    isAuthenticated: false
  },
  mutations: {
    setUser(state, user) {
      state.user = user
      state.isAuthenticated = true
    },
    logout(state) {
      state.user = null
      state.isAuthenticated = false
    }
  },
  actions: {
    async login({ commit }, credentials) {
      const response = await axios.post('/api/login', credentials)
      commit('setUser', response.data.user)
      localStorage.setItem('token', response.data.token)
    }
  }
})

表单验证增强

可以使用 Vuelidate 进行更复杂的表单验证：

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

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

vue 实现登录