当前位置：首页 > VUE

vue登录功能实现总结

2026-02-23 12:23:27VUE

Vue 登录功能实现总结

基础结构搭建

使用 Vue CLI 或 Vite 初始化项目，安装必要依赖（如 vue-router、axios）。创建以下核心文件：

src/views/Login.vue（登录页）
src/router/index.js（路由配置）
src/api/auth.js（API 接口封装）
src/store/auth.js（状态管理，如使用 Vuex/Pinia）

登录表单设计

在 Login.vue 中实现表单双向绑定，包含基础验证逻辑：

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>
const form = reactive({
  username: '',
  password: ''
});

const handleSubmit = () => {
  if (!form.username || !form.password) {
    alert('请填写完整信息');
    return;
  }
  // 调用登录API
};
</script>

接口请求处理

在 auth.js 中封装登录 API：

import axios from 'axios';

export const login = (credentials) => {
  return axios.post('/api/auth/login', credentials);
};

路由与权限控制

配置路由守卫实现登录跳转：

vue登录功能实现总结

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

状态管理

使用 Vuex/Pinia 管理登录状态：

// store/auth.js (Pinia示例)
export const useAuthStore = defineStore('auth', {
  state: () => ({
    user: null,
    token: localStorage.getItem('token') || ''
  }),
  actions: {
    async login(credentials) {
      const res = await authApi.login(credentials);
      this.token = res.data.token;
      localStorage.setItem('token', this.token);
    }
  }
});

安全增强措施

添加表单验证库（如 vee-validate）
实现 JWT 自动刷新机制
敏感请求头添加 Authorization: Bearer ${token}
密码字段前端加密处理（如使用 crypto-js）

错误处理优化

统一处理 API 错误响应：

// axios 拦截器示例
axios.interceptors.response.use(
  response => response,
  error => {
    if (error.response.status === 401) {
      router.push('/login');
    }
    return Promise.reject(error);
  }
);