vue 实现登录

Vue 实现登录功能

创建登录表单组件

在 Vue 项目中创建一个登录表单组件（如 Login.vue），包含用户名和密码输入框以及提交按钮。使用 v-model 实现双向数据绑定。

<template>
  <div>
    <input v-model="username" placeholder="用户名" />
    <input v-model="password" type="password" placeholder="密码" />
    <button @click="handleLogin">登录</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      username: '',
      password: ''
    }
  },
  methods: {
    handleLogin() {
      // 登录逻辑
    }
  }
}
</script>

添加表单验证

在提交前验证用户名和密码是否为空，可以使用 Vue 的计算属性或手动验证。

methods: {
  handleLogin() {
    if (!this.username || !this.password) {
      alert('请输入用户名和密码');
      return;
    }
    // 继续登录逻辑
  }
}

发送登录请求

使用 axios 或其他 HTTP 客户端发送登录请求到后端 API。

import axios from 'axios';

methods: {
  async handleLogin() {
    if (!this.username || !this.password) {
      alert('请输入用户名和密码');
      return;
    }

    try {
      const response = await axios.post('/api/login', {
        username: this.username,
        password: this.password
      });
      // 处理登录成功
    } catch (error) {
      alert('登录失败: ' + error.message);
    }
  }
}

处理登录响应

登录成功后保存用户 token 并跳转到首页。

methods: {
  async handleLogin() {
    // ...验证和请求代码

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

添加路由守卫

在 Vue Router 中添加全局前置守卫，保护需要登录的页面。

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

实现登出功能

添加登出方法，清除本地存储的 token 并重定向到登录页。

methods: {
  logout() {
    localStorage.removeItem('token');
    this.$router.push('/login');
  }
}

使用 Vuex 管理状态

对于更复杂的应用，可以使用 Vuex 集中管理登录状态。

// store.js
export default new Vuex.Store({
  state: {
    user: null,
    isAuthenticated: false
  },
  mutations: {
    setUser(state, user) {
      state.user = user;
      state.isAuthenticated = true;
    },
    logout(state) {
      state.user = null;
      state.isAuthenticated = false;
    }
  },
  actions: {
    login({ commit }, credentials) {
      return axios.post('/api/login', credentials)
        .then(response => {
          commit('setUser', response.data.user);
          localStorage.setItem('token', response.data.token);
        });
    },
    logout({ commit }) {
      commit('logout');
      localStorage.removeItem('token');
    }
  }
});

添加加载状态

在登录过程中显示加载状态，提升用户体验。

<template>
  <button @click="handleLogin" :disabled="isLoading">
    {{ isLoading ? '登录中...' : '登录' }}
  </button>
</template>

<script>
export default {
  data() {
    return {
      isLoading: false
    }
  },
  methods: {
    async handleLogin() {
      this.isLoading = true;
      try {
        // 登录逻辑
      } finally {
        this.isLoading = false;
      }
    }
  }
}
</script>

记住登录状态

添加"记住我"功能，使用 localStorage 或 cookie 持久化登录状态。

<template>
  <input type="checkbox" v-model="rememberMe" /> 记住我
</template>

<script>
export default {
  data() {
    return {
      rememberMe: false
    }
  },
  methods: {
    handleLogin() {
      if (this.rememberMe) {
        localStorage.setItem('rememberMe', 'true');
      }
      // 其他登录逻辑
    }
  }
}
</script>