当前位置：首页 > VUE

vue登录功能实现总结

2026-01-22 21:39:51VUE

登录功能实现步骤

前端部分（Vue.js）

创建登录表单组件，包含用户名和密码输入框，以及提交按钮。使用v-model双向绑定数据，监听表单提交事件。

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

在Vue组件中定义数据和方法，处理登录逻辑。使用axios发送POST请求到后端API，传递用户名和密码。

<script>
import axios from 'axios';

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('登录失败:', error);
      }
    }
  }
}
</script>

后端部分（Node.js示例）

创建登录API接口，验证用户凭据，生成JWT令牌返回给前端。

const express = require('express');
const jwt = require('jsonwebtoken');
const app = express();

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: '用户名或密码错误' });
  }
});

路由守卫

在Vue路由中配置全局前置守卫，保护需要认证的路由。

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

Token验证

在需要认证的API请求中，从localStorage获取token并添加到请求头。

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