当前位置：首页 > VUE

vue登录业务的实现

2026-03-27 00:43:12VUE

登录业务实现流程

前端部分（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发送登录请求到后端API接口。处理响应数据，保存token到本地存储。

<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示例）

vue登录业务的实现

创建登录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' });
    return res.json({ token });
  }

  res.status(401).json({ error: '认证失败' });
});

路由守卫

vue登录业务的实现

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

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

HTTP拦截器

配置axios拦截器，自动在请求头中添加认证token。

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