当前位置：首页 > VUE

vue实现登录思路

2026-01-17 17:19:13VUE

Vue 登录功能实现思路

1. 前端页面设计
使用 Vue 的单文件组件（SFC）构建登录页面，包含表单元素（用户名、密码输入框）和提交按钮。表单需绑定 v-model 实现双向数据绑定，并通过 v-on 监听提交事件。

<template>
  <form @submit.prevent="handleLogin">
    <input v-model="username" type="text" placeholder="用户名" />
    <input v-model="password" type="password" placeholder="密码" />
    <button type="submit">登录</button>
  </form>
</template>

2. 数据绑定与验证
在 Vue 的 data 或 ref（Composition API）中定义响应式变量存储用户输入，结合 v-model 实现数据绑定。使用计算属性或第三方库（如 VeeValidate）进行表单验证。

<script setup>
import { ref } from 'vue';
const username = ref('');
const password = ref('');
const handleLogin = () => {
  if (!username.value || !password.value) {
    alert('请输入用户名和密码');
    return;
  }
  // 调用登录接口
};
</script>

3. 调用登录接口
通过 Axios 或 Fetch API 发送 POST 请求到后端登录接口，传递用户名和密码。推荐将 API 请求封装为独立服务模块。

import axios from 'axios';
const login = async (username, password) => {
  try {
    const response = await axios.post('/api/login', { username, password });
    localStorage.setItem('token', response.data.token); // 存储 token
  } catch (error) {
    console.error('登录失败:', error);
  }
};

4. 处理登录状态
登录成功后，后端返回的 token 可存储到 localStorage 或 Vuex/Pinia 状态管理中。通过路由守卫（如 beforeEach）实现页面访问权限控制。

// 路由守卫示例（Vue Router）
router.beforeEach((to, from, next) => {
  const isAuthenticated = localStorage.getItem('token');
  if (to.meta.requiresAuth && !isAuthenticated) {
    next('/login');
  } else {
    next();
  }
});

5. 安全性优化