当前位置：首页 > VUE

vue实现登录验证原理

2026-01-22 03:19:04VUE

Vue 登录验证实现原理

Vue 的登录验证通常涉及前端与后端的交互，核心原理包括表单验证、Token 管理和路由守卫。以下是常见的实现方法：

表单验证与数据提交

使用 Vue 的表单绑定和验证库（如 VeeValidate）对用户输入进行校验，确保用户名和密码符合规则。通过 Axios 或其他 HTTP 客户端将数据发送到后端 API：

vue实现登录验证原理

<template>
  <form @submit.prevent="handleLogin">
    <input v-model="username" type="text" placeholder="Username" />
    <input v-model="password" type="password" placeholder="Password" />
    <button type="submit">Login</button>
  </form>
</template>

<script>
export default {
  data() {
    return {
      username: '',
      password: ''
    };
  },
  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('/dashboard');
      } catch (error) {
        console.error('Login failed:', error);
      }
    }
  }
};
</script>

Token 存储与管理

登录成功后，后端返回的 Token（如 JWT）通常存储在客户端的 localStorage 或 sessionStorage 中。后续请求通过 HTTP 头部（如 Authorization）携带 Token：

vue实现登录验证原理

axios.interceptors.request.use(config => {
  const token = localStorage.getItem('token');
  if (token) {
    config.headers.Authorization = `Bearer ${token}`;
  }
  return config;
});

路由守卫验证

通过 Vue Router 的全局前置守卫（beforeEach）检查用户是否已登录，未登录时重定向到登录页：

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

后端验证与响应

后端接收到登录请求后，验证用户凭证并生成 Token。例如，使用 Node.js 和 Express 的 JWT 实现：

app.post('/api/login', (req, res) => {
  const { username, password } = req.body;
  // 模拟数据库验证
  if (username === 'admin' && password === '123456') {
    const token = jwt.sign({ username }, 'secret_key', { expiresIn: '1h' });
    res.json({ token });
  } else {
    res.status(401).json({ error: 'Invalid credentials' });
  }
});