当前位置：首页 > VUE

vue的简单登录实现

2026-02-23 03:52:29VUE

创建Vue项目

使用Vue CLI创建一个新项目：

vue create vue-login-demo
cd vue-login-demo

安装必要依赖

安装Vue Router和Axios用于路由和HTTP请求：

npm install vue-router axios

配置路由

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

import { createRouter, createWebHistory } from 'vue-router'
import Login from '../views/Login.vue'

const routes = [
  {
    path: '/login',
    name: 'Login',
    component: Login
  }
]

const router = createRouter({
  history: createWebHistory(),
  routes
})

export default router

创建登录组件

在src/views/Login.vue中实现登录表单：

<template>
  <div class="login">
    <h2>用户登录</h2>
    <form @submit.prevent="handleLogin">
      <input v-model="username" placeholder="用户名" />
      <input v-model="password" type="password" placeholder="密码" />
      <button type="submit">登录</button>
    </form>
    <p v-if="error" class="error">{{ error }}</p>
  </div>
</template>

<script>
import axios from 'axios'

export default {
  data() {
    return {
      username: '',
      password: '',
      error: ''
    }
  },
  methods: {
    async handleLogin() {
      try {
        const response = await axios.post('/api/login', {
          username: this.username,
          password: this.password
        })
        localStorage.setItem('token', response.data.token)
        this.$router.push('/dashboard')
      } catch (err) {
        this.error = '登录失败，请检查用户名和密码'
      }
    }
  }
}
</script>

<style scoped>
.login {
  max-width: 300px;
  margin: 0 auto;
  padding: 20px;
}
.error {
  color: red;
}
</style>

模拟API请求

在public/api/login目录下创建模拟响应文件（仅用于开发测试）：

{
  "token": "mock-jwt-token"
}

配置Axios基础URL

在src/main.js中配置Axios：

import axios from 'axios'
axios.defaults.baseURL = 'http://localhost:8080'

添加路由守卫

在src/router/index.js中添加导航守卫：

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