基于 Express+JWT + Vue 的前后端分离架构

基于 Express、JWT 和 Vue 的前后端分离架构是一种常见的现代 Web 开发架构。这种架构将前端和后端分开部署,前端使用 Vue.js 框架构建用户界面,后端使用 Express.js 框架处理业务逻辑和提供 API 接口,JWT(JSON Web Token)用于用户的身份验证和授权。

以下是实现这种架构的基本步骤:

一、后端(Express + JWT)

初始化项目

bash 复制代码
mkdir backend
cd backend
npm init -y
npm install express jsonwebtoken body-parser cors mongoose

设置 Express 服务器

javascript 复制代码
// server.js
const express = require('express');
const bodyParser = require('body-parser');
const cors = require('cors');
const jwt = require('jsonwebtoken');

const app = express();
const PORT = process.env.PORT || 3000;

// Middleware
app.use(bodyParser.json());
app.use(cors());

// Dummy user data (in a real application, you should use a database)
const users = [
    { id: 1, username: 'testuser', password: 'testpass' },
];

// Middleware to authenticate JWT
const authenticateJWT = (req, res, next) => {
    const token = req.header('Authorization').replace('Bearer ', '');
    if (!token) return res.sendStatus(401);

    jwt.verify(token, 'your_jwt_secret', (err, user) => {
        if (err) return res.sendStatus(403);
        req.user = user;
        next();
    });
};

// User login route
app.post('/login', (req, res) => {
    const { username, password } = req.body;
    if (users[0].username!=username) return res.sendStatus(401);

    const token = jwt.sign({ id: user.id }, 'your_jwt_secret');
    res.json({ token });
});

// Protected route
app.get('/protected', authenticateJWT, (req, res) => {
    res.json({ message: 'This is a protected route', user: req.user });
});

app.listen(PORT, () => {
    console.log(`Server running on port ${PORT}`);
});

二、前端(Vue)

初始化项目

bash 复制代码
mkdir frontend
cd frontend
npm install -g @vue/cli
vue create my-project
cd my-project
npm install axios

配置 Vue 项目

javascript 复制代码
// src/main.js
import Vue from 'vue';
import App from './App.vue';
import axios from 'axios';

Vue.config.productionTip = false;

Vue.prototype.$axios = axios;

new Vue({
  render: h => h(App),
}).$mount('#app');

创建登录组件

javascript 复制代码
<!-- src/components/Login.vue -->
<template>
  <div>
    <h2>Login</h2>
    <form @submit.prevent="login">
      <div>
        <label for="username">Username:</label>
        <input type="text" v-model="username" id="username" />
      </div>
      <div>
        <label for="password">Password:</label>
        <input type="password" v-model="password" id="password" />
      </div>
      <button type="submit">Login</button>
    </form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      username: '',
      password: '',
    };
  },
  methods: {
    async login() {
      try {
        const response = await this.$axios.post('http://localhost:3000/login', {
          username: this.username,
          password: this.password,
        });
        const token = response.data.token;
        localStorage.setItem('jwt', token);
        this.$router.push('/protected');
      } catch (error) {
        console.error(error);
      }
    },
  },
};
</script>

创建受保护组件

javascript 复制代码
<!-- src/components/Protected.vue -->
<template>
  <div>
    <h2>Protected Route</h2>
    <div v-if="message">{{ message }}</div>
    <div v-else>Loading...</div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: '',
    };
  },
  created() {
    this.fetchProtectedData();
  },
  methods: {
    async fetchProtectedData() {
      const token = localStorage.getItem('jwt');
      if (!token) {
        this.$router.push('/login');
        return;
      }

      try {
        const response = await this.$axios.get('http://localhost:3000/protected', {
          headers: { Authorization: `Bearer ${token}` },
        });
        this.message = response.data.message;
      } catch (error) {
        console.error(error);
        localStorage.removeItem('jwt');
        this.$router.push('/login');
      }
    },
  },
};
</script>

配置路由

javascript 复制代码
// src/router/index.js
import Vue from 'vue';
import Router from 'vue-router';
import Login from '@/components/Login.vue';
import Protected from '@/components/Protected.vue';

Vue.use(Router);

export default new Router({
  routes: [
    {
      path: '/',
      redirect: '/login',
    },
    {
      path: '/login',
      name: 'Login',
      component: Login,
    },
    {
      path: '/protected',
      name: 'Protected',
      component: Protected,
    },
  ],
});

三、运行项目

启动后端服务器

bash 复制代码
cd backend
node server.js

启动前端应用

bash 复制代码
cd frontend/my-project
npm run serve
复制代码
相关推荐
亿牛云爬虫专家39 分钟前
Kubernetes下的分布式采集系统设计与实战:趋势监测失效引发的架构进化
分布式·python·架构·kubernetes·爬虫代理·监测·采集
kangkang-1 小时前
PC端基于SpringBoot架构控制无人机(三):系统架构设计
java·架构·无人机
ai小鬼头3 小时前
Ollama+OpenWeb最新版0.42+0.3.35一键安装教程,轻松搞定AI模型部署
后端·架构·github
Hexene...5 小时前
【前端Vue】如何实现echarts图表根据父元素宽度自适应大小
前端·vue.js·echarts
初遇你时动了情5 小时前
腾讯地图 vue3 使用 封装 地图组件
javascript·vue.js·腾讯地图
华子w9089258595 小时前
基于 SpringBoot+VueJS 的农产品研究报告管理系统设计与实现
vue.js·spring boot·后端
群联云防护小杜6 小时前
构建分布式高防架构实现业务零中断
前端·网络·分布式·tcp/ip·安全·游戏·架构
森焱森7 小时前
垂起固定翼无人机介绍
c语言·单片机·算法·架构·无人机
前端小趴菜057 小时前
React-forwardRef-useImperativeHandle
前端·vue.js·react.js
P7Dreamer8 小时前
Vue 3 + Element Plus 实现可定制的动态表格列配置组件
前端·vue.js