当前位置：首页 > VUE

vue实现登录系统

2026-01-17 05:24:07VUE

Vue 登录系统实现步骤

前端部分

安装依赖 确保项目已安装 Vue 3 和必要的库（如 axios、vue-router）：

npm install axios vue-router

路由配置 在 router/index.js 中配置登录路由和主页路由：

import { createRouter, createWebHistory } from 'vue-router';
import Login from '../views/Login.vue';
import Home from '../views/Home.vue';

const routes = [
  { path: '/login', component: Login },
  { path: '/', component: Home, meta: { requiresAuth: true } }
];

const router = createRouter({
  history: createWebHistory(),
  routes
});

登录组件 创建 Login.vue 组件，包含表单和提交逻辑：

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

<script setup>
import { ref } from 'vue';
import axios from 'axios';
import { useRouter } from 'vue-router';

const username = ref('');
const password = ref('');
const router = useRouter();

const handleSubmit = async () => {
  try {
    const response = await axios.post('/api/login', {
      username: username.value,
      password: password.value
    });
    localStorage.setItem('token', response.data.token);
    router.push('/');
  } catch (error) {
    alert('登录失败');
  }
};
</script>

路由守卫 在 router/index.js 中添加全局前置守卫：

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

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

创建登录接口

const express = require('express');
const jwt = require('jsonwebtoken');
const app = express();
app.use(express.json());

const users = [{ id: 1, username: 'admin', password: '123456' }];

app.post('/api/login', (req, res) => {
  const { username, password } = req.body;
  const user = users.find(u => u.username === username && u.password === password);
  if (user) {
    const token = jwt.sign({ id: user.id }, 'your_secret_key');
    res.json({ token });
  } else {
    res.status(401).json({ error: 'Invalid credentials' });
  }
});

app.listen(3000, () => console.log('Server running'));