当前位置：首页 > VUE

vue实现登录验证原理

2026-02-22 18:22:36VUE

Vue 登录验证实现原理

Vue 实现登录验证通常涉及前端与后端的交互，结合路由守卫、状态管理（如 Vuex 或 Pinia）和 HTTP 请求库（如 Axios）。以下是核心实现逻辑：

前端表单验证

通过 Vue 的 v-model 绑定表单数据，结合校验库（如 VeeValidate）或自定义规则验证用户输入：

data() {
  return {
    form: {
      username: '',
      password: ''
    },
    rules: {
      username: [{ required: true, message: '请输入用户名' }],
      password: [{ required: true, message: '请输入密码' }]
    }
  }
}

发送登录请求

使用 Axios 向后端发送认证请求，通常为 POST 请求携带用户凭证：

methods: {
  async submitForm() {
    try {
      const res = await axios.post('/api/login', this.form);
      localStorage.setItem('token', res.data.token); // 存储 token
      this.$router.push('/dashboard'); // 跳转至受保护路由
    } catch (error) {
      console.error('登录失败:', error.response.data);
    }
  }
}

路由守卫验证

通过 Vue Router 的全局前置守卫 (beforeEach) 检查用户是否已认证：

router.beforeEach((to, from, next) => {
  const isAuthenticated = localStorage.getItem('token');
  if (to.meta.requiresAuth && !isAuthenticated) {
    next('/login'); // 重定向到登录页
  } else {
    next(); // 放行
  }
});

需在路由配置中标记需验证的路由：

{ path: '/dashboard', component: Dashboard, meta: { requiresAuth: true } }

状态管理整合

使用 Vuex 或 Pinia 集中管理登录状态，避免直接操作 localStorage：

// Vuex 示例
state: {
  user: null,
  token: localStorage.getItem('token') || null
},
mutations: {
  setUser(state, { user, token }) {
    state.user = user;
    state.token = token;
    localStorage.setItem('token', token);
  }
}

令牌刷新与过期处理

通过 Axios 拦截器自动处理令牌刷新或过期跳转：

axios.interceptors.response.use(
  response => response,
  error => {
    if (error.response.status === 401) {
      localStorage.removeItem('token');
      router.push('/login');
    }
    return Promise.reject(error);
  }
);