当前位置：首页 > VUE

如何基于vue实现登录

2026-01-20 22:56:54VUE

创建Vue项目

使用Vue CLI初始化项目：

vue create vue-login-demo
cd vue-login-demo
npm install axios vue-router

配置路由

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

如何基于vue实现登录

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-container">
    <h2>用户登录</h2>
    <form @submit.prevent="handleLogin">
      <input v-model="form.username" placeholder="用户名" type="text" required />
      <input v-model="form.password" placeholder="密码" type="password" required />
      <button type="submit">登录</button>
    </form>
  </div>
</template>

<script>
import { ref } from 'vue'
import axios from 'axios'
import { useRouter } from 'vue-router'

export default {
  setup() {
    const form = ref({
      username: '',
      password: ''
    })
    const router = useRouter()

    const handleLogin = async () => {
      try {
        const response = await axios.post('/api/login', form.value)
        localStorage.setItem('token', response.data.token)
        router.push('/dashboard')
      } catch (error) {
        alert('登录失败: ' + error.response.data.message)
      }
    }

    return { form, handleLogin }
  }
}
</script>

配置API请求

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

如何基于vue实现登录

import axios from 'axios'
axios.defaults.baseURL = 'http://your-api-domain.com'

添加路由守卫

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

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

样式优化

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

<style scoped>
.login-container {
  max-width: 400px;
  margin: 0 auto;
  padding: 20px;
}
input {
  display: block;
  width: 100%;
  margin: 10px 0;
  padding: 8px;
}
button {
  width: 100%;
  padding: 10px;
  background: #42b983;
  color: white;
  border: none;
}
</style>

标签: vue