当前位置：首页 > VUE

vue登录逻辑实现

2026-03-29 05:29:45VUE

登录逻辑实现步骤

前端部分（Vue.js）

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

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

在Vue组件中定义数据和方法，处理登录逻辑。使用axios或其他HTTP客户端发送登录请求。

<script>
import axios from 'axios';

export default {
  data() {
    return {
      form: {
        username: '',
        password: ''
      }
    };
  },
  methods: {
    async handleLogin() {
      try {
        const response = await axios.post('/api/login', this.form);
        localStorage.setItem('token', response.data.token);
        this.$router.push('/dashboard');
      } catch (error) {
        console.error('Login failed:', error);
      }
    }
  }
};
</script>

后端部分（示例使用Node.js/Express）

创建登录API端点，验证用户凭据并返回JWT令牌。

vue登录逻辑实现

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 === 'password') {
    const token = jwt.sign({ username }, 'your-secret-key', { expiresIn: '1h' });
    return res.json({ token });
  }

  res.status(401).json({ error: 'Invalid credentials' });
});

路由守卫

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

import Vue from 'vue';
import Router from 'vue-router';

Vue.use(Router);

const router = new Router({
  routes: [
    { path: '/login', component: Login },
    { path: '/dashboard', component: Dashboard, meta: { requiresAuth: true } }
  ]
});

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

Token验证

vue登录逻辑实现

在需要认证的API请求中，添加Authorization头部。

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

错误处理

处理token过期或无效的情况，自动跳转到登录页面。

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