当前位置：首页 > VUE

vue登陆实现

2026-02-11 03:44:58VUE

实现Vue登录功能

创建登录表单组件

在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>
  </div>
</template>

<script>
export default {
  data() {
    return {
      username: '',
      password: ''
    }
  },
  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) {
        alert('登录失败')
      }
    }
  }
}
</script>

配置路由

在router/index.js中设置登录路由：

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
    }
  ]
})

实现API请求

在main.js中配置axios：

vue登陆实现

import axios from 'axios'
import VueAxios from 'vue-axios'

Vue.use(VueAxios, axios)
axios.defaults.baseURL = 'http://your-api-domain.com'

添加路由守卫

在router/index.js中添加全局前置守卫：

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

处理用户状态

创建auth.js管理用户状态：

vue登陆实现

export default {
  isAuthenticated() {
    return !!localStorage.getItem('token')
  },
  logout() {
    localStorage.removeItem('token')
  }
}

后端接口示例

Node.js Express登录接口示例：

app.post('/api/login', (req, res) => {
  const { username, password } = req.body
  if (username === 'admin' && password === '123456') {
    res.json({ token: 'generated-jwt-token' })
  } else {
    res.status(401).json({ error: 'Invalid credentials' })
  }
})

样式优化

为登录表单添加基础样式：

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

标签: vue