说实话Vue3 电商项目做了不少但很多同学最纠结的其实不是商品列表怎么写而是登录之后怎么做鉴权、下单之后怎么调支付以及支付回调回来之后订单状态怎么同步。这篇文章就围绕“登录到支付完整流程”把 Vue3 电商应用中这一段最核心的链路拆开讲清楚。文章会带读者完成这些内容用 Vite 初始化一个 Vue3 电商应用前台实现账号密码登录、token 存储、路由守卫和 Axios 拦截器做购物车与下单链路在支付环节分别梳理支付宝沙箱支付和微信支付两种对接方式的差异最后给出一套常见的登录失败与支付失败排查清单。如果你准备用 Vue3 Pinia Vue Router Axios 走一遍电商项目直接照着下面的工程结构去做就可以。1. Vue3 电商应用实战项目核心模块与技术栈速览“登录到支付”听起来只是两个页面动作实际上它在 Vue3 电商项目里横跨了认证、路由、状态管理、接口拦截、订单状态处理和支付回调等多个环节。先从整体看一个最小可运行的 Vue3 电商前端项目需要覆盖哪些模块。模块需要解决的核心问题用户登录账号密码提交、token 存储、用户信息缓存登录鉴权路由守卫、Axios 请求拦截、401 统一处理商品列表商品数据请求、搜索参数、列表渲染购物车本地购物车或服务端购物车、计算总价订单结算收货地址、订单备注、商品快照、生成订单号在线支付生成支付参数、跳转收银台、轮询订单状态支付回调后端验签、更新订单状态、前端刷新支付结果技术选型方面一个典型的 Vue3 电商实战项目通常使用如下组合依赖用途Vue 3 script setup使用组合式 API 组织业务逻辑Vite本地开发与生产构建Vue Router 4实现路由跳转、路由守卫配置Pinia管理登录态、用户信息、购物车数据Axios统一封装 HTTP 请求与 token 注入Sass / Less / Tailwind按个人习惯选择样式方案这套技术栈适合什么读者最典型的是两类人一类是学完 Vue2 或 Vue3 基础后想知道购物流程怎么串起来的前端初学者另一类是准备做毕业设计或公司内部商城 Demo 的开发者。这个项目的价值不在于页面长得多么华丽而在于把“用户身份”和“订单资金”这两条最容易被忽略的主线完整贯穿起来。2. 登录到支付完整业务链路拆解很多同学把登录做成一个独立页面把支付做成一两个弹窗这种“功能孤岛”在写 Demo 时没问题一旦真实对接后端接口和支付平台就会到处卡住。要把流程做对必须先把业务链路想清楚。一个 Vue3 电商应用从登录到支付核心链路可以按下面这些步骤拆分用户打开商品列表页点击购买或进入购物车结算时检查本地是否存在 token没有 token 或 token 过期跳转登录页用户提交账号密码后端校验成功返回 token 和用户信息前端将 token 保存到 Pinia并持久化到 localStorage后续请求通过 Axios 请求拦截器自动携带 token用户提交订单后端生成订单号和待支付金额前端请求后端获取“支付参数”或“支付链接”支付宝场景跳转收银台微信场景拉起 JSAPI 或展示 Native 支付二维码用户完成支付后后端接收异步通知并更新订单支付状态前端通过轮询或查询订单详情把页面状态改回“已支付”。这条链路里登录和鉴权解决的是“当前用户是谁”的问题支付解决的是“订单是否真实完成扣款”的问题。支付回调是整个流程中最需要严谨处理的部分因为回调结果不能被前端伪造业务完成状态必须以后端收到的异步通知为准。从前后端职责边界看Vue3 前端主要负责两件事携带凭证安全地发起请求以及把用户引导到支付收银台。真正生成订单、生成支付参数、验签和更新余额的动作都要放在后端。如果前端直接持有支付平台密钥等于把金库钥匙挂在门口这是项目中最常见的低级错误。3. Vue3 电商项目环境准备与初始化在开始写代码之前先把本机环境确认一遍。不同项目的限制不一样以这套 Vue3 电商 Demo 为例建议环境如下项目建议配置Node.js建议使用 LTS 版本通常要求 18 或 20包管理器npm、pnpm 或 yarn 均可后端服务提供登录、商品、订单接口的测试服务支付测试环境支付宝开放平台沙箱或微信支付测试商户号如果你本地还没有 Node.js去官网下载 LTS 版本安装即可。不建议使用过旧的 Node 10 或 12 启动 Vite 项目版本过低会导致依赖安装失败或开发服务器无法启动。初始化项目使用 Vite 最新脚手架命令npm create vitelatest vue3-shop -- --template vue-ts命令执行后会生成一个名为 vue3-shop 的目录默认包含 Vue 3 TypeScript 模板。进入目录并安装基础依赖cd vue3-shop npm install npm install vue-router4 pinia axios安装完成后建议先清理脚手架默认的 HelloWorld 组件保留干净的目录结构。下面是一个推荐的 src 目录划分方式src/ ├── api/ # 接口请求模块 │ ├── user.ts │ ├── order.ts │ └── payment.ts ├── router/ # Vue Router 配置 │ └── index.ts ├── stores/ # Pinia 状态管理 │ ├── user.ts │ └── cart.ts ├── views/ # 页面组件 │ ├── LoginView.vue │ ├── HomeView.vue │ └── OrderConfirmView.vue ├── utils/ # 请求封装、工具函数 │ └── request.ts └── main.ts初始化完成后执行npm run dev看到 Vite 默认页面说明环境已经通了。注意第一次启动 Vite 时会自动选择可用端口如果 5173 被占用控制台会提示使用其他端口不影响后续开发。4. Vue3 用户登录模块开发表单、状态与持久化登录模块是整套权限控制的地基。登录表单提交后后端返回 token前端拿到 token 后要做三件事写入 Pinia、持久化到 localStorage、在后续请求中携带。4.1 编写登录页面登录页面采用 Vue3 组合式 API 写法表单字段只需要账号、密码和基本的非空校验script setup langts import { ref } from vue import { useRouter } from vue-router import { useUserStore } from /stores/user const router useRouter() const userStore useUserStore() const loginForm ref({ username: , password: }) const loading ref(false) const errorMessage ref() async function handleLogin() { if (!loginForm.value.username || !loginForm.value.password) { errorMessage.value 请输入账号和密码 return } loading.value true errorMessage.value try { await userStore.login(loginForm.value) router.push(/) } catch (error) { errorMessage.value 登录失败请检查账号密码或网络状态 } finally { loading.value false } } /script这里把用户状态全部交给 Pinia页面组件只负责收集表单和跳转。LoginView 模板部分按业务样式自行设计即可比如常见的居中卡片布局加表单校验提示。4.2 使用 Pinia 管理登录状态Pinia 的 user store 负责调用登录接口、保存 token、保存用户信息、注销清理。一个最小实现如下import { defineStore } from pinia import { ref } from vue import { loginApi, getUserInfoApi } from /api/user export const useUserStore defineStore(user, () { const token refstring(localStorage.getItem(token) || ) const userInfo refRecordstring, any | null(null) async function login(payload: { username: string; password: string }) { const res await loginApi(payload) token.value res.data.token localStorage.setItem(token, res.data.token) await fetchUserInfo() } async function fetchUserInfo() { const res await getUserInfoApi() userInfo.value res.data } function logout() { token.value userInfo.value null localStorage.removeItem(token) } return { token, userInfo, login, fetchUserInfo, logout } })这里要特别注意刷新页面后的状态恢复。如果 token 只存在 Pinia 内存里用户刷新页面 token 就会丢失。从 localStorage 读取初始值是一个很常见的小技巧可以避免刷新后重新登录。也有人倾向于把 token 存在 sessionStorage 中关闭浏览器即失效。两种做法都可以关键是和业务需求一致。普通商城项目关闭后希望用户下次不用重复登录通常会使用 localStorage。4.3 Axios 请求封装与请求拦截器登录之后所有需要鉴权的接口都要自动携带 token。如果每次请求都手动加 header业务代码会非常脏。业界标准做法是在 Axios 请求拦截器中统一注入。import axios from axios import router from /router const service axios.create({ baseURL: import.meta.env.VITE_API_BASE_URL || /api, timeout: 15000 }) service.interceptors.request.use((config) { const token localStorage.getItem(token) if (token) { config.headers.Authorization Bearer ${token} } return config }) service.interceptors.response.use( (response) response.data, (error) { if (error.response?.status 401) { localStorage.removeItem(token) router.push(/login) } return Promise.reject(error) } ) export default service登录失败时常见的表现不是后端直接报“密码错误”而是后端返回业务错误码比如code: 1001需要在业务层统一处理。service.interceptors.response.use( (response) { if (response.data.code ! 0) { return Promise.reject(new Error(response.data.message)) } return response.data }, (error) Promise.reject(error) )实际项目到底用 HTTP 状态码还是业务码取决于后端团队的约定。电商项目里更常见的是 HTTP 200 业务状态码因为接口在网关层不会因为业务失败产生太多 4xx 请求。4.4 路由守卫控制页面访问权限只有登录用户才能进入购物车、订单确认页和个人中心。路由守卫需要检查目标路由是否标记为需要鉴权。import { createRouter, createWebHistory } from vue-router const router createRouter({ history: createWebHistory(), routes: [ { path: /login, name: login, component: () import(/views/LoginView.vue) }, { path: /, name: home, component: () import(/views/HomeView.vue) }, { path: /cart, name: cart, component: () import(/views/CartView.vue), meta: { requiresAuth: true } }, { path: /order/confirm, name: orderConfirm, component: () import(/views/OrderConfirmView.vue), meta: { requiresAuth: true } } ] }) router.beforeEach((to) { const token localStorage.getItem(token) if (to.meta.requiresAuth !token) { return { name: login, query: { redirect: to.fullPath } } } if (to.name login token) { return { name: home } } return true }) export default router这段核心逻辑是没有 token 访问受保护页面就强制跳登录页已经登录还要访问登录页则直接进首页。把重定向地址放在query里登录成功后可以跳回原来的页面体验会好很多。4.5 登录成功与登录失败的系统设计登录模块最容易坑人的不是表单样式而是这三个点场景问题表现解决思路登录成功后刷新页面token 丢失又被拉回登录页localStorage 初始化 Pinia statetoken 过期请求页面报 401但不跳登录响应拦截器统一清理 token 并跳转后端判定登录失败弹窗提示不明显根据业务码显示后端 message禁止笼统提示在登录流程里还要区分“密码错误”和“账号被锁定”等不同业务状态不要把所有失败都归成一句话。生产级项目建议在登录接口中增加登录失败次数限制连续失败多次后要求输入验证码或暂时锁定这是电商应用的通用安全措施。5. Vue3 商品列表与购物车页面开发从登录到支付之间购物车是不可跳过的一环。用户登录后通常先浏览商品再把商品加入购物车最后从购物车结算下单。5.1 商品列表数据请求商品列表页一般需要支持分页、价格排序和分类筛选。请求参数统一放在 query 中Vue3 侧使用 URLSearchParams 或直接传对象给 Axios。export interface ProductQuery { page: number pageSize: number categoryId?: number keyword?: string } export function getProductList(params: ProductQuery) { return service.get(/product/list, { params }) }商品列表数据渲染时通常使用ref保存列表数据使用computed根据状态筛选展示项。Vue3 中 computed 最常见的应用场景之一就是把服务端返回的原始列表转换成页面直接可用的展示数据例如按库存状态分组。const productList refProductItem[]([]) const onSaleList computed(() productList.value.filter(item item.status 1)) const outOfStockList computed(() productList.value.filter(item item.stock 0))如果项目只有前端 Mock 数据也可以先在后端返回兜底数据但商品库存和状态必须贴近真实业务场景否则后续下单流程会出现逻辑不自洽的问题。5.2 购物车加入与购物车列表计算购物车既可以保存在前端 localStorage也可以保存在服务端。纯前端 Demo 使用 Pinia 加 localStorage 持久化更省事服务端购物车则适合需要多端同步的商城。这里给出一个 Pinia 购物车的核心实现包含加入购物车、更新数量、计算勾选商品总价三个核心能力import { defineStore } from pinia import { ref, computed } from vue export interface CartItem { skuId: string name: string price: number quantity: number checked: boolean } export const useCartStore defineStore(cart, () { const items refCartItem[]([]) const checkedItems computed(() items.value.filter(item item.checked)) const totalPrice computed(() checkedItems.value.reduce((sum, item) sum item.price * item.quantity, 0) ) function addItem(item: CartItem) { const existing items.value.find(i i.skuId item.skuId) if (existing) { existing.quantity item.quantity } else { items.value.push({ ...item, checked: true }) } } function removeItem(skuId: string) { items.value items.value.filter(i i.skuId ! skuId) } function updateQuantity(skuId: string, quantity: number) { const item items.value.find(i i.skuId skuId) if (item) item.quantity quantity } return { items, checkedItems, totalPrice, addItem, removeItem, updateQuantity } })商品加入购物车前要判断该 SKU 是否已存在已存在则只改数量不是简单地往数组里 push 新对象。总价计算用 computed 而不是普通函数这样购物车内每一项勾选状态变化时结算金额会自动响应更新。6. Vue3 下单结算与订单确认页面购物车结算后进入订单确认页。订单承载的信息量和商品不同下单时通常需要传商品快照、地址信息、运费和备注。商品快照的含义是把下单时的商品名称、图片、价格、规格记录下来后续商品改价也不影响这笔订单的展示和历史核算。6.1 订单确认页数据组装订单确认页会从购物车勾选商品中读取数据也可以由“立即购买”按钮直接跳转并带商品参数两者本质上是组装同一个订单数据结构。下面的代码展示前端如何组织下单参数import { ref } from vue import { useCartStore } from /stores/cart import { createOrderApi } from /api/order const cartStore useCartStore() interface Address { id: number receiver: string phone: string detail: string } const selectedAddress refAddress | null(null) const remark ref() interface CreateOrderPayload { addressId: number items: Array{ skuId: string; quantity: number } remark: string } async function submitOrder() { if (!selectedAddress.value) { throw new Error(请选择收货地址) } const payload: CreateOrderPayload { addressId: selectedAddress.value.id, items: cartStore.checkedItems.map(item ({ skuId: item.skuId, quantity: item.quantity })), remark: remark.value } const res await createOrderApi(payload) // res.data.orderId 作为后续进入收银台的参数 }前端在下单参数里只需要传 SKU 编号和数量价格由服务端根据最新商品价格计算不能信任前端传过来的 price。这样设计的目的是防止用户通过抓包篡改价格字段。6.2 下单成功后跳转收银台下单成功后页面从“订单确认页”跳转到“收银台页”路径上带订单编号。收银台页面负责展示订单金额、支付方式并触发支付请求。router.push({ name: checkout, query: { orderId: res.data.orderId } })收银台和订单确认页职责不同确认页负责信息填写收银台负责完成资金支付。很多项目会把这两个页面混在一起导致提交按钮被点击两次产生重复订单。实践中必须用 loading 状态和按钮防重复提交做兜底提交订单后立刻禁用按钮。7. 支付模块支付宝沙箱与微信支付对接实战支付是电商项目中最敏感的一环前后端边界必须分清楚。前端永远不要直接调用支付平台的加签接口也不要把商户私钥放在浏览器端或 GitHub。支付参数生成和回调验签全部由后端完成前端只做“获取支付参数”和“展示支付收银台”这两件事。7.1 支付宝沙箱支付流程对于没有真实商户资质或个人学习阶段的开发者支付宝沙箱是最合适的测试方式。沙箱环境的目的就是在不产生真实资金交易的前提下完整走一遍下单、收银台、同步回跳、异步通知的支付链路。对接支付宝页面支付的核心流程如下在支付宝开放平台开发者中心创建应用配置沙箱环境生成 RSA 密钥将应用公钥配置到支付宝获取用于测试的沙箱买家账号后端调用支付宝下单接口生成支付表单字符串后端将表单字符串返回给前端前端把表单写入当前页面或新页面并自动提交跳转到支付宝收银台用户在沙箱收银台用测试账号完成支付支付宝异步通知后端支付结果后端验签后更新订单为已支付。前端在收银台拿到的是后端返回的支付表单或支付链接。以 Node.js 后端为例伪代码如下import AlipaySdk from alipay-sdk // 这段代码运行在后端服务中绝不能泄漏私钥 const alipaySdk new AlipaySdk({ appId: process.env.ALIPAY_APP_ID, privateKey: process.env.ALIPAY_PRIVATE_KEY, gateway: process.env.ALIPAY_GATEWAY }) const result await alipaySdk.pageExec(alipay.trade.page.pay, { bizContent: { outTradeNo: orderNo, productCode: FAST_INSTANT_TRADE_PAY, totalAmount: 99.00, subject: Vue3实战项目商品订单 }, returnUrl: http://localhost:5173/order/result, notifyUrl: https://api.example.com/payment/alipay/notify })实际项目中的返回参数以你使用的 SDK 版本为准。后端把result交给前端后前端用 form 表单渲染并提交即可完成跳转。7.2 微信支付流程与使用边界微信支付的对接形态比支付宝更依赖运行环境。Vue3 电商应用如果是 H5 页面跑在微信浏览器里一般走 JSAPI 支付如果是桌面 PC 浏览器一般走 Native 扫码支付。微信支付真实接入前需要申请商户号并完成相关联的 AppID 绑定与域名配置。个人开发者直接上线微信支付会面临较高的资质门槛所以在教学阶段可以先用沙箱类支付通道测试流程等真实商户号申请下来后再替换参数。微信 JSAPI 支付大致流程如下用户需要在微信内置浏览器中打开 H5 商城前端通过微信 OAuth 获取用户 openid下单后前端跳转收银台前端请求后端接口发起微信支付后端调用微信支付服务商或直连商户的下单接口微信支付接口返回 prepay_id后端按微信支付规范组织再次签名参数前端拿到参数后调用微信 JSAPI 的WeixinJSBridge.invoke或wx.chooseWXPay拉起支付用户输入支付密码完成支付微信服务器发送异步通知给后端回调地址后端验签并更新订单状态。前端负责调用微信支付 JS 接口获取用户支付结果但订单状态的后端更新一定要以微信异步通知为准。前端 JS 返回的支付成功提示只能作为页面展示依据不能作为退款、发货或其他资金操作的依据。在 Web 场景中出现形如requestPayment: fail banned的错误时通常和当前环境没有支付权限或商户号未开通对应支付能力有关例如小程序商户号还没开通“小程序支付”或当前页面不在微信浏览器中。这是支付产品权限配置问题不是前端代码问题。真正的排查入口是微信商户平台的“产品中心”核对商户号开通了哪类支付产品以及当前发起支付的页面是否在允许的域名或 AppID 环境下。7.3 前端收银台轮询订单状态用户支付完成后页面不一定会立即收到回调结果。支付宝同步跳转可能因为网络问题晚到微信支付 JS 回调也可能出现用户已经完成支付但前端未收到通知的情况。因此前端收银台在触发支付之后通常用“轮询订单状态”的方式刷新支付结果。import { ref, onMounted, onUnmounted } from vue import { getOrderDetailApi } from /api/order const orderStatus ref(WAIT_PAY) let timer: ReturnTypetypeof setInterval | undefined async function checkOrderStatus(orderId: string) { const res await getOrderDetailApi(orderId) const status res.data.orderStatus if (status PAID) { orderStatus.value PAID clearInterval(timer) router.replace(/order/result?statussuccess) } } onMounted(() { const orderId route.query.orderId as string // 每3秒查一次支付体验上比较适中 timer setInterval(() { checkOrderStatus(orderId) }, 3000) }) onUnmounted(() { clearInterval(timer) })轮询时间间隔尽量不要设置得太短否则高峰期会给后端造成不必要的查询压力。项目允许的情况下也可以优先使用 WebSocket 推送支付结果由后端在收到支付通知后主动推送新的订单状态给前端。8. 接口联调、登录失败与支付失败排查清单前端写完后实际开发最耗时间的是接口联调。登录失败、支付失败、回调不更新这些问题通常不是渲染问题而是接口协议不一致。下面这张表是 Vue3 电商项目“登录到支付”链路最常见的问题排查汇总问题现象可能原因排查顺序解决方案登录接口返回 404后端接口路径与前端不一致先看 Network 请求 URL和接口文档核对 baseURL 和路径登录成功但请求商品列表 401token 没有写入请求头查看请求 Header 有无 Authorization在 Axios 请求拦截器加 token刷新页面后登录态丢失token 只存在 Pinia 内存刷新后打印 token初始化 store 时从 localStorage 读取登录成功不跳转路由跳转被路由守卫拦截检查路由守卫条件确认登录页是否被重定向循环卡住跨域登录接口报错前端端口与后端端口不一致查看浏览器 CORS 报错开发环境配置 Vite proxy提交订单后没反应按钮被重复点击检查 pending 提交状态增加 loading 防抖与 disabled支付参数生成失败后端缺少商户配置查看后端日志检查 appId、私钥、回调地址打开收银台但支付不了沙箱账号错误确认收银台登录账号使用支付宝沙箱买家账号已扣款但订单显示未支付异步通知没回传查看后端回调日志检查 notifyUrl 是否公网可达订单状态更新延迟依赖同步回跳展示结果检查页面是否等待回调改为轮询或 WebSocket 推送前端报 requestPayment fail运行环境不具备支付能力确认是否在微信浏览器中开通商户支付产品权限排查接口问题时不要只看浏览器 Console 里的报错。优先看 Network 面板确认请求是否真的发出、请求头是否有 Authorization、响应体是否带着后端业务码。支付流程的问题则要优先查后端日志因为支付平台的异步通知到达的是后端回调地址不是前端接口。9. Vue3 电商项目工程化多环境配置、打包与调试建议很多教程只教你在开发环境跑通代码一上线就崩。这个 Vue3 电商项目从登录到支付如果想顺利上线必须做好环境配置管理。9.1 环境变量与接口地址切换开发环境用本地后端接口生产环境用线上接口支付回调地址也要按环境区分。Vite 项目里支持创建多个环境变量文件.env.development .env.production.env.development 示例如下VITE_API_BASE_URL/api VITE_UPLOAD_URLhttps://oss.example.com/upload.env.production 中则配置生产环境对应的地址。代码中使用import.meta.env.VITE_API_BASE_URL读取环境变量打包后由环境变量控制接口指向避免频繁改代码。本地开发时如果后端接口没有配置跨域最容易的方案是在 Vite 的 vite.config.ts 里配置 proxyimport { defineConfig } from vite import vue from vitejs/plugin-vue export default defineConfig({ plugins: [vue()], server: { host: 0.0.0.0, port: 5173, proxy: { /api: { target: http://localhost:3000, changeOrigin: true } } } })前端本地请求/api/user/loginVite 会把请求自动代理到http://localhost:3000/user/login从浏览器角度看没有跨域问题。后端部署到线上后正式环境再用 Nginx 转发或直接使用线上接口域名。9.2 最小可运行项目配置建议把这个 Vue3 电商项目从登录到支付跑通前先确认下面这些基础项是否已经配置好登录接口能返回 token 和用户信息Axios 请求拦截器能正确注入 Authorization路由守卫不会造成死循环或重复跳转下单接口返回唯一订单号后端有完成的沙箱支付对接回调接口能正常接收支付通知。第一次跑通时尽量使用小数量、小金额的测试数据比如买一件 9.9 元商品完成全流程不要一开始就压测大批量订单。真正跑通后再考虑批量业务。10. 登录与支付项目的安全边界与合规建议电商项目只要涉及支付天然的测试就是一条资金链路。使用前后端分离架构时不要把密钥或支付签名放在前端。很多“支付失败”“订单状态不同步”的问题根源都在后端验签和回调处理上前端只需要展示结果即可。下面这些安全边界值得在项目里落地用户密码不要明文存储登录接口必须支持错误次数限制token 不要放在无法控制过期时间的 cookie 中建议使用 Bearer Token同时配置合理过期时间前端不要接受用户传入的价格字段商品价格由后端实时计算订单回调必须验签验签失败不能更新订单状态支付成功回调要做到幂等同一笔订单重复通知不会重复入账日志中不要记录完整用户身份信息和支付敏感字段涉及真实用户支付信息的应用上线前应进行安全评审。如果在项目中使用用户真实手机号、头像、人脸等个人数据必须获得用户授权并遵守数据保护相关要求。测试阶段应使用测试账号和沙箱环境切勿使用真实支付密码或敏感身份信息。这个项目如果后续接入了真实微信支付、支付宝商户号还需要严格遵循支付平台的商户规则避免二清、虚假交易等违规情形。11. Vue3 电商项目常见面试点与扩展方向在面试中这类项目经常被问到的问题并不是“购物车怎么写”而是围绕整个业务流程的边界问题比如 token 过期后怎么续期、同步回调和异步回调的区别、服务端如何防止用户篡改价格、批量下单时库存不足怎么处理。这个问题很值得在前端最关心的概念中串起来面试问题对应模块可回答深度Vue3 中 computed 和 watch 的区别购物车总价计算computed 有缓存适合依赖响应式数据派生值Vue Router 如何实现登录鉴权登录与路由守卫通过 meta.requiresAuth 配合 beforeEachPinia 刷新后数据丢失怎么办登录状态持久化初始化时读取 localStorageAxios 如何统一处理 401请求拦截器与响应拦截器在 response 错误里清理 token 并跳登录下单后如何避免重复请求订单确认页用 loading、按钮 disabled、前端幂等 token支付从哪里发起收银台前端请求后端生成支付参数后跳收银台支付成功状态以谁为准支付回调以后端异步通知验签结果为准如果想继续扩展这个 Vue3 电商项目可以考虑这几个方向接入 Vue3 后台管理系统做订单列表和发货管理把购物车改为服务端存储支持多设备同步增加支付宝沙箱分期或花呗选项理解更多收银台形态将支付回调队列化使用消息队列处理高并发通知引入 ECharts 做订单金额趋势可视化把“下单到支付”的成功率统计出来。本文示例代码的接口路径、字段名和支付参数需要根据实际项目调整。登录和支付这类流程最忌讳照抄真正去跑通一个接口后再换自己的业务场景比复制粘贴一堆代码更有价值。建议先按上面这套流程在本地把登录到支付的闭环跑通再逐步增加营销、优惠券、秒杀这类业务能力。 Vue3电商项目登录到支付全流程实战：鉴权、路由守卫与支付对接
说实话Vue3 电商项目做了不少但很多同学最纠结的其实不是商品列表怎么写而是登录之后怎么做鉴权、下单之后怎么调支付以及支付回调回来之后订单状态怎么同步。这篇文章就围绕“登录到支付完整流程”把 Vue3 电商应用中这一段最核心的链路拆开讲清楚。文章会带读者完成这些内容用 Vite 初始化一个 Vue3 电商应用前台实现账号密码登录、token 存储、路由守卫和 Axios 拦截器做购物车与下单链路在支付环节分别梳理支付宝沙箱支付和微信支付两种对接方式的差异最后给出一套常见的登录失败与支付失败排查清单。如果你准备用 Vue3 Pinia Vue Router Axios 走一遍电商项目直接照着下面的工程结构去做就可以。1. Vue3 电商应用实战项目核心模块与技术栈速览“登录到支付”听起来只是两个页面动作实际上它在 Vue3 电商项目里横跨了认证、路由、状态管理、接口拦截、订单状态处理和支付回调等多个环节。先从整体看一个最小可运行的 Vue3 电商前端项目需要覆盖哪些模块。模块需要解决的核心问题用户登录账号密码提交、token 存储、用户信息缓存登录鉴权路由守卫、Axios 请求拦截、401 统一处理商品列表商品数据请求、搜索参数、列表渲染购物车本地购物车或服务端购物车、计算总价订单结算收货地址、订单备注、商品快照、生成订单号在线支付生成支付参数、跳转收银台、轮询订单状态支付回调后端验签、更新订单状态、前端刷新支付结果技术选型方面一个典型的 Vue3 电商实战项目通常使用如下组合依赖用途Vue 3 script setup使用组合式 API 组织业务逻辑Vite本地开发与生产构建Vue Router 4实现路由跳转、路由守卫配置Pinia管理登录态、用户信息、购物车数据Axios统一封装 HTTP 请求与 token 注入Sass / Less / Tailwind按个人习惯选择样式方案这套技术栈适合什么读者最典型的是两类人一类是学完 Vue2 或 Vue3 基础后想知道购物流程怎么串起来的前端初学者另一类是准备做毕业设计或公司内部商城 Demo 的开发者。这个项目的价值不在于页面长得多么华丽而在于把“用户身份”和“订单资金”这两条最容易被忽略的主线完整贯穿起来。2. 登录到支付完整业务链路拆解很多同学把登录做成一个独立页面把支付做成一两个弹窗这种“功能孤岛”在写 Demo 时没问题一旦真实对接后端接口和支付平台就会到处卡住。要把流程做对必须先把业务链路想清楚。一个 Vue3 电商应用从登录到支付核心链路可以按下面这些步骤拆分用户打开商品列表页点击购买或进入购物车结算时检查本地是否存在 token没有 token 或 token 过期跳转登录页用户提交账号密码后端校验成功返回 token 和用户信息前端将 token 保存到 Pinia并持久化到 localStorage后续请求通过 Axios 请求拦截器自动携带 token用户提交订单后端生成订单号和待支付金额前端请求后端获取“支付参数”或“支付链接”支付宝场景跳转收银台微信场景拉起 JSAPI 或展示 Native 支付二维码用户完成支付后后端接收异步通知并更新订单支付状态前端通过轮询或查询订单详情把页面状态改回“已支付”。这条链路里登录和鉴权解决的是“当前用户是谁”的问题支付解决的是“订单是否真实完成扣款”的问题。支付回调是整个流程中最需要严谨处理的部分因为回调结果不能被前端伪造业务完成状态必须以后端收到的异步通知为准。从前后端职责边界看Vue3 前端主要负责两件事携带凭证安全地发起请求以及把用户引导到支付收银台。真正生成订单、生成支付参数、验签和更新余额的动作都要放在后端。如果前端直接持有支付平台密钥等于把金库钥匙挂在门口这是项目中最常见的低级错误。3. Vue3 电商项目环境准备与初始化在开始写代码之前先把本机环境确认一遍。不同项目的限制不一样以这套 Vue3 电商 Demo 为例建议环境如下项目建议配置Node.js建议使用 LTS 版本通常要求 18 或 20包管理器npm、pnpm 或 yarn 均可后端服务提供登录、商品、订单接口的测试服务支付测试环境支付宝开放平台沙箱或微信支付测试商户号如果你本地还没有 Node.js去官网下载 LTS 版本安装即可。不建议使用过旧的 Node 10 或 12 启动 Vite 项目版本过低会导致依赖安装失败或开发服务器无法启动。初始化项目使用 Vite 最新脚手架命令npm create vitelatest vue3-shop -- --template vue-ts命令执行后会生成一个名为 vue3-shop 的目录默认包含 Vue 3 TypeScript 模板。进入目录并安装基础依赖cd vue3-shop npm install npm install vue-router4 pinia axios安装完成后建议先清理脚手架默认的 HelloWorld 组件保留干净的目录结构。下面是一个推荐的 src 目录划分方式src/ ├── api/ # 接口请求模块 │ ├── user.ts │ ├── order.ts │ └── payment.ts ├── router/ # Vue Router 配置 │ └── index.ts ├── stores/ # Pinia 状态管理 │ ├── user.ts │ └── cart.ts ├── views/ # 页面组件 │ ├── LoginView.vue │ ├── HomeView.vue │ └── OrderConfirmView.vue ├── utils/ # 请求封装、工具函数 │ └── request.ts └── main.ts初始化完成后执行npm run dev看到 Vite 默认页面说明环境已经通了。注意第一次启动 Vite 时会自动选择可用端口如果 5173 被占用控制台会提示使用其他端口不影响后续开发。4. Vue3 用户登录模块开发表单、状态与持久化登录模块是整套权限控制的地基。登录表单提交后后端返回 token前端拿到 token 后要做三件事写入 Pinia、持久化到 localStorage、在后续请求中携带。4.1 编写登录页面登录页面采用 Vue3 组合式 API 写法表单字段只需要账号、密码和基本的非空校验script setup langts import { ref } from vue import { useRouter } from vue-router import { useUserStore } from /stores/user const router useRouter() const userStore useUserStore() const loginForm ref({ username: , password: }) const loading ref(false) const errorMessage ref() async function handleLogin() { if (!loginForm.value.username || !loginForm.value.password) { errorMessage.value 请输入账号和密码 return } loading.value true errorMessage.value try { await userStore.login(loginForm.value) router.push(/) } catch (error) { errorMessage.value 登录失败请检查账号密码或网络状态 } finally { loading.value false } } /script这里把用户状态全部交给 Pinia页面组件只负责收集表单和跳转。LoginView 模板部分按业务样式自行设计即可比如常见的居中卡片布局加表单校验提示。4.2 使用 Pinia 管理登录状态Pinia 的 user store 负责调用登录接口、保存 token、保存用户信息、注销清理。一个最小实现如下import { defineStore } from pinia import { ref } from vue import { loginApi, getUserInfoApi } from /api/user export const useUserStore defineStore(user, () { const token refstring(localStorage.getItem(token) || ) const userInfo refRecordstring, any | null(null) async function login(payload: { username: string; password: string }) { const res await loginApi(payload) token.value res.data.token localStorage.setItem(token, res.data.token) await fetchUserInfo() } async function fetchUserInfo() { const res await getUserInfoApi() userInfo.value res.data } function logout() { token.value userInfo.value null localStorage.removeItem(token) } return { token, userInfo, login, fetchUserInfo, logout } })这里要特别注意刷新页面后的状态恢复。如果 token 只存在 Pinia 内存里用户刷新页面 token 就会丢失。从 localStorage 读取初始值是一个很常见的小技巧可以避免刷新后重新登录。也有人倾向于把 token 存在 sessionStorage 中关闭浏览器即失效。两种做法都可以关键是和业务需求一致。普通商城项目关闭后希望用户下次不用重复登录通常会使用 localStorage。4.3 Axios 请求封装与请求拦截器登录之后所有需要鉴权的接口都要自动携带 token。如果每次请求都手动加 header业务代码会非常脏。业界标准做法是在 Axios 请求拦截器中统一注入。import axios from axios import router from /router const service axios.create({ baseURL: import.meta.env.VITE_API_BASE_URL || /api, timeout: 15000 }) service.interceptors.request.use((config) { const token localStorage.getItem(token) if (token) { config.headers.Authorization Bearer ${token} } return config }) service.interceptors.response.use( (response) response.data, (error) { if (error.response?.status 401) { localStorage.removeItem(token) router.push(/login) } return Promise.reject(error) } ) export default service登录失败时常见的表现不是后端直接报“密码错误”而是后端返回业务错误码比如code: 1001需要在业务层统一处理。service.interceptors.response.use( (response) { if (response.data.code ! 0) { return Promise.reject(new Error(response.data.message)) } return response.data }, (error) Promise.reject(error) )实际项目到底用 HTTP 状态码还是业务码取决于后端团队的约定。电商项目里更常见的是 HTTP 200 业务状态码因为接口在网关层不会因为业务失败产生太多 4xx 请求。4.4 路由守卫控制页面访问权限只有登录用户才能进入购物车、订单确认页和个人中心。路由守卫需要检查目标路由是否标记为需要鉴权。import { createRouter, createWebHistory } from vue-router const router createRouter({ history: createWebHistory(), routes: [ { path: /login, name: login, component: () import(/views/LoginView.vue) }, { path: /, name: home, component: () import(/views/HomeView.vue) }, { path: /cart, name: cart, component: () import(/views/CartView.vue), meta: { requiresAuth: true } }, { path: /order/confirm, name: orderConfirm, component: () import(/views/OrderConfirmView.vue), meta: { requiresAuth: true } } ] }) router.beforeEach((to) { const token localStorage.getItem(token) if (to.meta.requiresAuth !token) { return { name: login, query: { redirect: to.fullPath } } } if (to.name login token) { return { name: home } } return true }) export default router这段核心逻辑是没有 token 访问受保护页面就强制跳登录页已经登录还要访问登录页则直接进首页。把重定向地址放在query里登录成功后可以跳回原来的页面体验会好很多。4.5 登录成功与登录失败的系统设计登录模块最容易坑人的不是表单样式而是这三个点场景问题表现解决思路登录成功后刷新页面token 丢失又被拉回登录页localStorage 初始化 Pinia statetoken 过期请求页面报 401但不跳登录响应拦截器统一清理 token 并跳转后端判定登录失败弹窗提示不明显根据业务码显示后端 message禁止笼统提示在登录流程里还要区分“密码错误”和“账号被锁定”等不同业务状态不要把所有失败都归成一句话。生产级项目建议在登录接口中增加登录失败次数限制连续失败多次后要求输入验证码或暂时锁定这是电商应用的通用安全措施。5. Vue3 商品列表与购物车页面开发从登录到支付之间购物车是不可跳过的一环。用户登录后通常先浏览商品再把商品加入购物车最后从购物车结算下单。5.1 商品列表数据请求商品列表页一般需要支持分页、价格排序和分类筛选。请求参数统一放在 query 中Vue3 侧使用 URLSearchParams 或直接传对象给 Axios。export interface ProductQuery { page: number pageSize: number categoryId?: number keyword?: string } export function getProductList(params: ProductQuery) { return service.get(/product/list, { params }) }商品列表数据渲染时通常使用ref保存列表数据使用computed根据状态筛选展示项。Vue3 中 computed 最常见的应用场景之一就是把服务端返回的原始列表转换成页面直接可用的展示数据例如按库存状态分组。const productList refProductItem[]([]) const onSaleList computed(() productList.value.filter(item item.status 1)) const outOfStockList computed(() productList.value.filter(item item.stock 0))如果项目只有前端 Mock 数据也可以先在后端返回兜底数据但商品库存和状态必须贴近真实业务场景否则后续下单流程会出现逻辑不自洽的问题。5.2 购物车加入与购物车列表计算购物车既可以保存在前端 localStorage也可以保存在服务端。纯前端 Demo 使用 Pinia 加 localStorage 持久化更省事服务端购物车则适合需要多端同步的商城。这里给出一个 Pinia 购物车的核心实现包含加入购物车、更新数量、计算勾选商品总价三个核心能力import { defineStore } from pinia import { ref, computed } from vue export interface CartItem { skuId: string name: string price: number quantity: number checked: boolean } export const useCartStore defineStore(cart, () { const items refCartItem[]([]) const checkedItems computed(() items.value.filter(item item.checked)) const totalPrice computed(() checkedItems.value.reduce((sum, item) sum item.price * item.quantity, 0) ) function addItem(item: CartItem) { const existing items.value.find(i i.skuId item.skuId) if (existing) { existing.quantity item.quantity } else { items.value.push({ ...item, checked: true }) } } function removeItem(skuId: string) { items.value items.value.filter(i i.skuId ! skuId) } function updateQuantity(skuId: string, quantity: number) { const item items.value.find(i i.skuId skuId) if (item) item.quantity quantity } return { items, checkedItems, totalPrice, addItem, removeItem, updateQuantity } })商品加入购物车前要判断该 SKU 是否已存在已存在则只改数量不是简单地往数组里 push 新对象。总价计算用 computed 而不是普通函数这样购物车内每一项勾选状态变化时结算金额会自动响应更新。6. Vue3 下单结算与订单确认页面购物车结算后进入订单确认页。订单承载的信息量和商品不同下单时通常需要传商品快照、地址信息、运费和备注。商品快照的含义是把下单时的商品名称、图片、价格、规格记录下来后续商品改价也不影响这笔订单的展示和历史核算。6.1 订单确认页数据组装订单确认页会从购物车勾选商品中读取数据也可以由“立即购买”按钮直接跳转并带商品参数两者本质上是组装同一个订单数据结构。下面的代码展示前端如何组织下单参数import { ref } from vue import { useCartStore } from /stores/cart import { createOrderApi } from /api/order const cartStore useCartStore() interface Address { id: number receiver: string phone: string detail: string } const selectedAddress refAddress | null(null) const remark ref() interface CreateOrderPayload { addressId: number items: Array{ skuId: string; quantity: number } remark: string } async function submitOrder() { if (!selectedAddress.value) { throw new Error(请选择收货地址) } const payload: CreateOrderPayload { addressId: selectedAddress.value.id, items: cartStore.checkedItems.map(item ({ skuId: item.skuId, quantity: item.quantity })), remark: remark.value } const res await createOrderApi(payload) // res.data.orderId 作为后续进入收银台的参数 }前端在下单参数里只需要传 SKU 编号和数量价格由服务端根据最新商品价格计算不能信任前端传过来的 price。这样设计的目的是防止用户通过抓包篡改价格字段。6.2 下单成功后跳转收银台下单成功后页面从“订单确认页”跳转到“收银台页”路径上带订单编号。收银台页面负责展示订单金额、支付方式并触发支付请求。router.push({ name: checkout, query: { orderId: res.data.orderId } })收银台和订单确认页职责不同确认页负责信息填写收银台负责完成资金支付。很多项目会把这两个页面混在一起导致提交按钮被点击两次产生重复订单。实践中必须用 loading 状态和按钮防重复提交做兜底提交订单后立刻禁用按钮。7. 支付模块支付宝沙箱与微信支付对接实战支付是电商项目中最敏感的一环前后端边界必须分清楚。前端永远不要直接调用支付平台的加签接口也不要把商户私钥放在浏览器端或 GitHub。支付参数生成和回调验签全部由后端完成前端只做“获取支付参数”和“展示支付收银台”这两件事。7.1 支付宝沙箱支付流程对于没有真实商户资质或个人学习阶段的开发者支付宝沙箱是最合适的测试方式。沙箱环境的目的就是在不产生真实资金交易的前提下完整走一遍下单、收银台、同步回跳、异步通知的支付链路。对接支付宝页面支付的核心流程如下在支付宝开放平台开发者中心创建应用配置沙箱环境生成 RSA 密钥将应用公钥配置到支付宝获取用于测试的沙箱买家账号后端调用支付宝下单接口生成支付表单字符串后端将表单字符串返回给前端前端把表单写入当前页面或新页面并自动提交跳转到支付宝收银台用户在沙箱收银台用测试账号完成支付支付宝异步通知后端支付结果后端验签后更新订单为已支付。前端在收银台拿到的是后端返回的支付表单或支付链接。以 Node.js 后端为例伪代码如下import AlipaySdk from alipay-sdk // 这段代码运行在后端服务中绝不能泄漏私钥 const alipaySdk new AlipaySdk({ appId: process.env.ALIPAY_APP_ID, privateKey: process.env.ALIPAY_PRIVATE_KEY, gateway: process.env.ALIPAY_GATEWAY }) const result await alipaySdk.pageExec(alipay.trade.page.pay, { bizContent: { outTradeNo: orderNo, productCode: FAST_INSTANT_TRADE_PAY, totalAmount: 99.00, subject: Vue3实战项目商品订单 }, returnUrl: http://localhost:5173/order/result, notifyUrl: https://api.example.com/payment/alipay/notify })实际项目中的返回参数以你使用的 SDK 版本为准。后端把result交给前端后前端用 form 表单渲染并提交即可完成跳转。7.2 微信支付流程与使用边界微信支付的对接形态比支付宝更依赖运行环境。Vue3 电商应用如果是 H5 页面跑在微信浏览器里一般走 JSAPI 支付如果是桌面 PC 浏览器一般走 Native 扫码支付。微信支付真实接入前需要申请商户号并完成相关联的 AppID 绑定与域名配置。个人开发者直接上线微信支付会面临较高的资质门槛所以在教学阶段可以先用沙箱类支付通道测试流程等真实商户号申请下来后再替换参数。微信 JSAPI 支付大致流程如下用户需要在微信内置浏览器中打开 H5 商城前端通过微信 OAuth 获取用户 openid下单后前端跳转收银台前端请求后端接口发起微信支付后端调用微信支付服务商或直连商户的下单接口微信支付接口返回 prepay_id后端按微信支付规范组织再次签名参数前端拿到参数后调用微信 JSAPI 的WeixinJSBridge.invoke或wx.chooseWXPay拉起支付用户输入支付密码完成支付微信服务器发送异步通知给后端回调地址后端验签并更新订单状态。前端负责调用微信支付 JS 接口获取用户支付结果但订单状态的后端更新一定要以微信异步通知为准。前端 JS 返回的支付成功提示只能作为页面展示依据不能作为退款、发货或其他资金操作的依据。在 Web 场景中出现形如requestPayment: fail banned的错误时通常和当前环境没有支付权限或商户号未开通对应支付能力有关例如小程序商户号还没开通“小程序支付”或当前页面不在微信浏览器中。这是支付产品权限配置问题不是前端代码问题。真正的排查入口是微信商户平台的“产品中心”核对商户号开通了哪类支付产品以及当前发起支付的页面是否在允许的域名或 AppID 环境下。7.3 前端收银台轮询订单状态用户支付完成后页面不一定会立即收到回调结果。支付宝同步跳转可能因为网络问题晚到微信支付 JS 回调也可能出现用户已经完成支付但前端未收到通知的情况。因此前端收银台在触发支付之后通常用“轮询订单状态”的方式刷新支付结果。import { ref, onMounted, onUnmounted } from vue import { getOrderDetailApi } from /api/order const orderStatus ref(WAIT_PAY) let timer: ReturnTypetypeof setInterval | undefined async function checkOrderStatus(orderId: string) { const res await getOrderDetailApi(orderId) const status res.data.orderStatus if (status PAID) { orderStatus.value PAID clearInterval(timer) router.replace(/order/result?statussuccess) } } onMounted(() { const orderId route.query.orderId as string // 每3秒查一次支付体验上比较适中 timer setInterval(() { checkOrderStatus(orderId) }, 3000) }) onUnmounted(() { clearInterval(timer) })轮询时间间隔尽量不要设置得太短否则高峰期会给后端造成不必要的查询压力。项目允许的情况下也可以优先使用 WebSocket 推送支付结果由后端在收到支付通知后主动推送新的订单状态给前端。8. 接口联调、登录失败与支付失败排查清单前端写完后实际开发最耗时间的是接口联调。登录失败、支付失败、回调不更新这些问题通常不是渲染问题而是接口协议不一致。下面这张表是 Vue3 电商项目“登录到支付”链路最常见的问题排查汇总问题现象可能原因排查顺序解决方案登录接口返回 404后端接口路径与前端不一致先看 Network 请求 URL和接口文档核对 baseURL 和路径登录成功但请求商品列表 401token 没有写入请求头查看请求 Header 有无 Authorization在 Axios 请求拦截器加 token刷新页面后登录态丢失token 只存在 Pinia 内存刷新后打印 token初始化 store 时从 localStorage 读取登录成功不跳转路由跳转被路由守卫拦截检查路由守卫条件确认登录页是否被重定向循环卡住跨域登录接口报错前端端口与后端端口不一致查看浏览器 CORS 报错开发环境配置 Vite proxy提交订单后没反应按钮被重复点击检查 pending 提交状态增加 loading 防抖与 disabled支付参数生成失败后端缺少商户配置查看后端日志检查 appId、私钥、回调地址打开收银台但支付不了沙箱账号错误确认收银台登录账号使用支付宝沙箱买家账号已扣款但订单显示未支付异步通知没回传查看后端回调日志检查 notifyUrl 是否公网可达订单状态更新延迟依赖同步回跳展示结果检查页面是否等待回调改为轮询或 WebSocket 推送前端报 requestPayment fail运行环境不具备支付能力确认是否在微信浏览器中开通商户支付产品权限排查接口问题时不要只看浏览器 Console 里的报错。优先看 Network 面板确认请求是否真的发出、请求头是否有 Authorization、响应体是否带着后端业务码。支付流程的问题则要优先查后端日志因为支付平台的异步通知到达的是后端回调地址不是前端接口。9. Vue3 电商项目工程化多环境配置、打包与调试建议很多教程只教你在开发环境跑通代码一上线就崩。这个 Vue3 电商项目从登录到支付如果想顺利上线必须做好环境配置管理。9.1 环境变量与接口地址切换开发环境用本地后端接口生产环境用线上接口支付回调地址也要按环境区分。Vite 项目里支持创建多个环境变量文件.env.development .env.production.env.development 示例如下VITE_API_BASE_URL/api VITE_UPLOAD_URLhttps://oss.example.com/upload.env.production 中则配置生产环境对应的地址。代码中使用import.meta.env.VITE_API_BASE_URL读取环境变量打包后由环境变量控制接口指向避免频繁改代码。本地开发时如果后端接口没有配置跨域最容易的方案是在 Vite 的 vite.config.ts 里配置 proxyimport { defineConfig } from vite import vue from vitejs/plugin-vue export default defineConfig({ plugins: [vue()], server: { host: 0.0.0.0, port: 5173, proxy: { /api: { target: http://localhost:3000, changeOrigin: true } } } })前端本地请求/api/user/loginVite 会把请求自动代理到http://localhost:3000/user/login从浏览器角度看没有跨域问题。后端部署到线上后正式环境再用 Nginx 转发或直接使用线上接口域名。9.2 最小可运行项目配置建议把这个 Vue3 电商项目从登录到支付跑通前先确认下面这些基础项是否已经配置好登录接口能返回 token 和用户信息Axios 请求拦截器能正确注入 Authorization路由守卫不会造成死循环或重复跳转下单接口返回唯一订单号后端有完成的沙箱支付对接回调接口能正常接收支付通知。第一次跑通时尽量使用小数量、小金额的测试数据比如买一件 9.9 元商品完成全流程不要一开始就压测大批量订单。真正跑通后再考虑批量业务。10. 登录与支付项目的安全边界与合规建议电商项目只要涉及支付天然的测试就是一条资金链路。使用前后端分离架构时不要把密钥或支付签名放在前端。很多“支付失败”“订单状态不同步”的问题根源都在后端验签和回调处理上前端只需要展示结果即可。下面这些安全边界值得在项目里落地用户密码不要明文存储登录接口必须支持错误次数限制token 不要放在无法控制过期时间的 cookie 中建议使用 Bearer Token同时配置合理过期时间前端不要接受用户传入的价格字段商品价格由后端实时计算订单回调必须验签验签失败不能更新订单状态支付成功回调要做到幂等同一笔订单重复通知不会重复入账日志中不要记录完整用户身份信息和支付敏感字段涉及真实用户支付信息的应用上线前应进行安全评审。如果在项目中使用用户真实手机号、头像、人脸等个人数据必须获得用户授权并遵守数据保护相关要求。测试阶段应使用测试账号和沙箱环境切勿使用真实支付密码或敏感身份信息。这个项目如果后续接入了真实微信支付、支付宝商户号还需要严格遵循支付平台的商户规则避免二清、虚假交易等违规情形。11. Vue3 电商项目常见面试点与扩展方向在面试中这类项目经常被问到的问题并不是“购物车怎么写”而是围绕整个业务流程的边界问题比如 token 过期后怎么续期、同步回调和异步回调的区别、服务端如何防止用户篡改价格、批量下单时库存不足怎么处理。这个问题很值得在前端最关心的概念中串起来面试问题对应模块可回答深度Vue3 中 computed 和 watch 的区别购物车总价计算computed 有缓存适合依赖响应式数据派生值Vue Router 如何实现登录鉴权登录与路由守卫通过 meta.requiresAuth 配合 beforeEachPinia 刷新后数据丢失怎么办登录状态持久化初始化时读取 localStorageAxios 如何统一处理 401请求拦截器与响应拦截器在 response 错误里清理 token 并跳登录下单后如何避免重复请求订单确认页用 loading、按钮 disabled、前端幂等 token支付从哪里发起收银台前端请求后端生成支付参数后跳收银台支付成功状态以谁为准支付回调以后端异步通知验签结果为准如果想继续扩展这个 Vue3 电商项目可以考虑这几个方向接入 Vue3 后台管理系统做订单列表和发货管理把购物车改为服务端存储支持多设备同步增加支付宝沙箱分期或花呗选项理解更多收银台形态将支付回调队列化使用消息队列处理高并发通知引入 ECharts 做订单金额趋势可视化把“下单到支付”的成功率统计出来。本文示例代码的接口路径、字段名和支付参数需要根据实际项目调整。登录和支付这类流程最忌讳照抄真正去跑通一个接口后再换自己的业务场景比复制粘贴一堆代码更有价值。建议先按上面这套流程在本地把登录到支付的闭环跑通再逐步增加营销、优惠券、秒杀这类业务能力。