vue登录怎样实现

2026-03-10 09:45:21VUE

实现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: {
    async handleSubmit() {
      try {
        const response = await this.$http.post('/api/login', {
          username: this.username,
          password: this.password
        })
        localStorage.setItem('token', response.data.token)
        this.$router.push('/dashboard')
      } catch (error) {
        console.error('登录失败:', error)
      }
    }
  }
}
</script>

路由配置

在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)

export default 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()
  }
})

状态管理

使用Vuex管理登录状态（store/auth.js）：

const state = {
  user: null,
  isAuthenticated: false
}

const mutations = {
  SET_USER(state, user) {
    state.user = user
    state.isAuthenticated = true
  },
  LOGOUT(state) {
    state.user = null
    state.isAuthenticated = false
  }
}

const actions = {
  login({ commit }, userData) {
    return authService.login(userData)
      .then(response => {
        commit('SET_USER', response.data.user)
        localStorage.setItem('token', response.data.token)
      })
  },
  logout({ commit }) {
    commit('LOGOUT')
    localStorage.removeItem('token')
  }
}

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

后端API请求

创建authService.js处理API请求：

import axios from 'axios'

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

样式设计

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

vue登录怎样实现

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

form {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

input {
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 4px;
}

button {
  padding: 10px;
  background-color: #42b983;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

标签: vue