当前位置：首页 > VUE

vue项目登录实现

2026-03-09 14:05:15VUE

Vue 项目登录功能实现

准备工作

确保已安装 Vue CLI 和必要的依赖，如 vue-router 和 axios。创建项目后，设置路由和状态管理（如 Vuex 或 Pinia）。

登录页面设计

创建登录组件 Login.vue，包含表单元素（用户名、密码输入框和提交按钮）。使用 v-model 绑定表单数据。

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

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

后端接口调用

使用 axios 发送登录请求到后端 API。处理响应并存储 token。

vue项目登录实现

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

路由守卫

配置全局前置守卫，检查用户是否已认证。未登录用户访问受限路由时重定向到登录页。

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

状态管理

使用 Vuex 或 Pinia 管理用户状态。创建 auth 模块存储登录状态和用户信息。

vue项目登录实现

// store/auth.js
export default {
  state: {
    user: null,
    isAuthenticated: false
  },
  mutations: {
    setUser(state, user) {
      state.user = user;
      state.isAuthenticated = true;
    },
    logout(state) {
      state.user = null;
      state.isAuthenticated = false;
    }
  }
};

注销功能

清除本地存储的 token 并重置状态。

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

错误处理和反馈

添加加载状态和错误提示，提升用户体验。

data() {
  return {
    loading: false,
    error: null
  };
},
methods: {
  async handleLogin() {
    this.loading = true;
    this.error = null;
    try {
      // 登录逻辑
    } catch (error) {
      this.error = '用户名或密码错误';
    } finally {
      this.loading = false;
    }
  }
}