当前位置：首页 > VUE

使用vue实现登录

2026-03-29 05:16:13VUE

使用 Vue 实现登录功能

创建 Vue 项目

确保已安装 Vue CLI，通过以下命令创建项目：

vue create login-app

选择默认配置或手动配置（推荐包含 Vue Router 和 Vuex）。

设置路由

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

使用vue实现登录

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

Vue.use(Router)

export default new Router({
  routes: [
    { path: '/login', name: 'Login', component: Login }
  ]
})

创建登录组件

在 src/views/Login.vue 中编写登录表单：

<template>
  <div class="login">
    <h2>登录</h2>
    <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>
    <p v-if="error" class="error">{{ error }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      username: '',
      password: '',
      error: ''
    }
  },
  methods: {
    handleSubmit() {
      if (this.username && this.password) {
        // 调用登录 API
        this.$store.dispatch('login', {
          username: this.username,
          password: this.password
        }).then(() => {
          this.$router.push('/dashboard') // 跳转到主页
        }).catch(err => {
          this.error = err.message
        })
      }
    }
  }
}
</script>

配置 Vuex 状态管理

在 src/store/index.js 中定义登录逻辑：

使用vue实现登录

import Vue from 'vue'
import Vuex from 'vuex'
import axios from 'axios'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    token: localStorage.getItem('token') || '',
    user: null
  },
  mutations: {
    setToken(state, token) {
      state.token = token
      localStorage.setItem('token', token)
    },
    setUser(state, user) {
      state.user = user
    }
  },
  actions: {
    async login({ commit }, { username, password }) {
      try {
        const res = await axios.post('/api/login', { username, password })
        commit('setToken', res.data.token)
        commit('setUser', res.data.user)
      } catch (err) {
        throw new Error('登录失败，请检查用户名或密码')
      }
    }
  }
})

配置 API 请求

在 src/main.js 中全局配置 Axios：

import axios from 'axios'
axios.defaults.baseURL = 'http://your-api-url.com'
Vue.prototype.$http = axios

添加路由守卫

在 src/router/index.js 中配置全局路由守卫，限制未登录访问：

router.beforeEach((to, from, next) => {
  const isAuthenticated = store.state.token
  if (to.name !== 'Login' && !isAuthenticated) {
    next({ name: 'Login' })
  } else {
    next()
  }
})

样式优化

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

<style scoped>
.login {
  max-width: 400px;
  margin: 0 auto;
  padding: 20px;
}
input {
  display: block;
  width: 100%;
  margin: 10px 0;
  padding: 8px;
}
.error {
  color: red;
}
</style>