当前位置：首页 > VUE

vue3.0登录实现

2026-02-23 05:36:22VUE

Vue 3.0 登录功能实现

Vue 3.0 实现登录功能通常涉及前端界面、表单验证、API 调用和状态管理。以下是具体实现步骤：

环境准备 确保已安装 Vue 3.0 和必要的依赖（如 Vue Router、Axios）。可以通过以下命令创建项目：

npm init vue@latest

登录页面组件 创建 Login.vue 组件，包含表单和基础验证逻辑：

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

<script setup>
import { reactive } from 'vue';
import { useRouter } from 'vue-router';
import axios from 'axios';

const form = reactive({
  username: '',
  password: ''
});

const router = useRouter();

const handleSubmit = async () => {
  try {
    const response = await axios.post('/api/login', form);
    localStorage.setItem('token', response.data.token);
    router.push('/dashboard');
  } catch (error) {
    console.error('登录失败:', error);
  }
};
</script>

路由配置 在 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;

状态管理（可选） 使用 Pinia 管理登录状态：

// stores/auth.js
import { defineStore } from 'pinia';

export const useAuthStore = defineStore('auth', {
  state: () => ({
    isAuthenticated: false,
    user: null
  }),
  actions: {
    login(token) {
      this.isAuthenticated = true;
      localStorage.setItem('token', token);
    },
    logout() {
      this.isAuthenticated = false;
      localStorage.removeItem('token');
    }
  }
});

表单验证增强 使用 Vuelidate 或手动验证：

const rules = {
  username: { required, minLength: minLength(3) },
  password: { required, minLength: minLength(6) }
};

const v$ = useVuelidate(rules, form);

拦截器配置 设置 Axios 请求拦截器处理 token：

axios.interceptors.request.use(config => {
  const token = localStorage.getItem('token');
  if (token) {
    config.headers.Authorization = `Bearer ${token}`;
  }
  return config;
});

导航守卫 保护需要认证的路由：

router.beforeEach((to, from, next) => {
  const isAuthenticated = localStorage.getItem('token');
  if (to.meta.requiresAuth && !isAuthenticated) {
    next('/login');
  } else {
    next();
  }
});

安全注意事项