当前位置：首页 > VUE

vue实现登陆

2026-03-08 09:55:11VUE

Vue 登录功能实现

创建登录表单组件

在 Vue 项目中创建一个登录表单组件，通常命名为 Login.vue。该组件包含用户名和密码输入框以及提交按钮。

<template>
  <div class="login-container">
    <form @submit.prevent="handleSubmit">
      <input v-model="username" type="text" placeholder="用户名" required>
      <input v-model="password" type="password" placeholder="密码" required>
      <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>

设置路由

在 router/index.js 中配置登录页面的路由，确保未登录用户只能访问登录页面。

import Vue from 'vue'
import Router from 'vue-router'
import Login from '@/components/Login'
import Home from '@/components/Home'

Vue.use(Router)

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

实现登录逻辑

在父组件或 Vuex 中处理登录逻辑，包括 API 调用和状态管理。

vue实现登陆

methods: {
  async login(credentials) {
    try {
      const response = await axios.post('/api/login', credentials)
      localStorage.setItem('token', response.data.token)
      this.$router.push('/')
    } catch (error) {
      console.error('登录失败:', error)
    }
  }
}

添加路由守卫

在路由配置中添加全局前置守卫，检查用户是否已登录。

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

状态管理（可选）

对于更复杂的应用，可以使用 Vuex 管理登录状态。

vue实现登陆

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

错误处理和反馈

添加错误处理和用户反馈，例如显示登录错误消息。

<template>
  <div>
    <p v-if="error" class="error-message">{{ error }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      error: ''
    }
  },
  methods: {
    async handleSubmit() {
      try {
        await this.login({ username: this.username, password: this.password })
      } catch (error) {
        this.error = '用户名或密码错误'
      }
    }
  }
}
</script>