vue登陆实现

登录功能实现步骤

在Vue中实现登录功能通常需要结合前端表单处理、后端API调用和状态管理。以下是常见的实现方法：

表单组件设计

创建登录表单组件，包含用户名和密码输入框：

<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>
export default {
  data() {
    return {
      form: {
        username: '',
        password: ''
      }
    }
  }
}
</script>

表单验证处理

添加基本的客户端验证逻辑：

methods: {
  validateForm() {
    if (!this.form.username.trim()) {
      alert('请输入用户名');
      return false;
    }
    if (!this.form.password) {
      alert('请输入密码');
      return false;
    }
    return true;
  }
}

API请求封装

使用axios发送登录请求到后端API：

import axios from 'axios';

methods: {
  async handleSubmit() {
    if (!this.validateForm()) return;

    try {
      const response = await axios.post('/api/login', this.form);
      localStorage.setItem('token', response.data.token);
      this.$router.push('/dashboard');
    } catch (error) {
      alert('登录失败: ' + (error.response?.data?.message || error.message));
    }
  }
}

状态管理集成

使用Vuex管理登录状态：

// store/modules/auth.js
export default {
  state: {
    user: null,
    token: localStorage.getItem('token') || null
  },
  mutations: {
    setUser(state, user) {
      state.user = user;
    },
    setToken(state, token) {
      state.token = token;
      localStorage.setItem('token', token);
    },
    logout(state) {
      state.user = null;
      state.token = null;
      localStorage.removeItem('token');
    }
  },
  actions: {
    async login({ commit }, credentials) {
      const response = await axios.post('/api/login', credentials);
      commit('setUser', response.data.user);
      commit('setToken', response.data.token);
    }
  }
}

路由守卫配置

添加路由守卫保护需要认证的页面：

// router/index.js
router.beforeEach((to, from, next) => {
  const isAuthenticated = store.state.auth.token;

  if (to.meta.requiresAuth && !isAuthenticated) {
    next('/login');
  } else {
    next();
  }
});

响应拦截处理

在axios拦截器中处理401未授权响应：

axios.interceptors.response.use(
  response => response,
  error => {
    if (error.response.status === 401) {
      store.commit('auth/logout');
      router.push('/login');
    }
    return Promise.reject(error);
  }
);

登录状态持久化

在应用初始化时恢复登录状态：

// main.js
if (localStorage.getItem('token')) {
  store.dispatch('auth/fetchUser');
}

以上实现涵盖了Vue登录功能的主要方面，可根据具体项目需求进行调整和扩展。