当前位置：首页 > news >正文

【智慧商场 | 项目笔记】第四天

news 2026/5/12 2:24:39

前言：智慧商城项目是关于前端的Vue2的项目，本系列文章，我讲总结我从这个项目中学到的知识点，写项目笔记。如果你也在初学Vue或想巩固Vue相关的知识，希望这系列文章可以帮助到你。

【智慧商场 | 项目笔记】第四天

- 今日完结：
- 今日收货：
- - 1.巩固了数字框组件的封装
  - 2.学会了Token 鉴权控制登录状态及页面跳转
  - 3.Axios 请求拦截器统一携带 Token 鉴权
- 杂项知识点：
- 总结：

今日完结：

完成购物车数字框基本封装
完成购物车中判断token登录提示
完成构建vuex购物车模块，获取数据存储
完成动态渲染购物车列表

今日收货：

1.巩固了数字框组件的封装

因为购物车数字框组件在多处地方我们都需要用到，所有我们可以把它封装成组件，而这时数字框中的数字就需要通过父传子的方法传进来，修改数字的方法通过子传父的方式传出去，我们可以用v-model进行封装

2.学会了Token 鉴权控制登录状态及页面跳转

通过token判断是否登录过，如果登录过就可以进行加入购物车的操作，如果没有就提示跳转到登录页，登录之后又自动跳转到购物车的页面

3.Axios 请求拦截器统一携带 Token 鉴权

后端通过 Token 识别用户身份，若每个接口都手动写 headers: { Access-Token: token }，会重复写几百遍；用拦截器一次配置，所有请求自动携带，既高效又能避免漏写导致的鉴权失败。

杂项知识点：

this.$router.replace

this.$router.push({path:'/login',query:{backUrl:this.$route.fullPath}})this.$router.replace({path:'/login',query:{backUrl:this.$route.fullPath}})

可以看出两个代码唯一不同的地方就是push和replace

使用 push 的问题：
操作流程为「商品列表页 → 商品详情页 → 点击购物车（未登录）→ push 跳登录页」，此时路由栈是「列表页 → 详情页 → 登录页」。
登录成功后跳转回详情页，路由栈变为「列表页 → 详情页 → 登录页 → 详情页」。
此时在详情页点击「返回」，会先回到登录页（而非预期的商品列表页），导致操作流程不连贯。

替换为 replace 的优化逻辑：
操作流程为「商品列表页 → 商品详情页 → 点击购物车（未登录）→ replace 跳登录页」，此时 replace 会用「登录页」覆盖路由栈中当前的「商品详情页」，路由栈变为「列表页 → 登录页」。
登录成功后跳转回详情页时，新的详情页会覆盖登录页的路由记录，最终路由栈回到「列表页 → 详情页」。
此时在详情页点击「返回」，就能直接回到商品列表页，符合用户的返回操作预期。