当前位置：首页 > VUE

vue实现登录原理

2026-01-18 01:11:48VUE

Vue 实现登录原理

Vue 实现登录功能主要涉及前端与后端的交互、状态管理、路由守卫等核心环节。以下是关键实现步骤：

登录表单与数据绑定

使用 Vue 的 v-model 双向绑定表单数据（如用户名和密码），通过 @submit 事件触发登录方法：

<template>
  <form @submit.prevent="handleLogin">
    <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>

发起登录请求

通过 Axios 或其他 HTTP 客户端向后端发送登录请求，通常为 POST 请求，携带表单数据：

methods: {
  async handleLogin() {
    try {
      const response = await axios.post('/api/login', this.form);
      const { token, userInfo } = response.data;
      // 存储 Token 和用户信息
      localStorage.setItem('token', token);
      this.$store.commit('setUser', userInfo);
      this.$router.push('/dashboard');
    } catch (error) {
      alert('登录失败：' + error.response.data.message);
    }
  }
}

状态管理（Vuex）

使用 Vuex 存储用户登录状态和 Token，便于全局访问：

// store.js
const store = new Vuex.Store({
  state: {
    user: null,
    token: null
  },
  mutations: {
    setUser(state, user) {
      state.user = user;
    },
    setToken(state, token) {
      state.token = token;
    }
  }
});

路由守卫

通过 Vue Router 的全局前置守卫 (beforeEach) 验证登录状态，保护需认证的路由：

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

Token 持久化与自动登录

登录成功后，将 Token 存储到 localStorage 或 sessionStorage，并在应用初始化时尝试恢复登录状态：

// App.vue 或 main.js
const token = localStorage.getItem('token');
if (token) {
  axios.defaults.headers.common['Authorization'] = `Bearer ${token}`;
  store.commit('setToken', token);
}