【小兔鲜电商前台 | 项目笔记】第七天

前言小兔鲜电商前台项目是一个基于Vue的PC端项目本系列文章我将总结我在这个项目中学到的知识点写项目笔记。如果你正好在学Vue或想从零搭建一个前端项目希望本系列文章可以帮助到你。【小兔鲜电商前台 | 项目笔记】第七天今日完结今日收获1.表单校验2.统一错误提示3.巩固Pinia管理数据4.请求拦截器携带Token5.Token失效401拦截处理杂项知识点总结今日完结登录-路由配置登录-表单验证实现登录-基础功能实现登录-Pinia管理用户数据登录-登录和非登录状态的模版适配登录-请求拦截器携带Token登录-退出登录功能实现登录-Token失效401拦截今日收获1.表单校验前端表单校验是为了提前拦截无效/错误数据减少无效请求、提升用户体验、减轻服务器压力。这个表单校验我们要用到的是Element中的Form组件其中用法在【Vue3大事件 | 项目笔记】第二天已讲到。2.统一错误提示好处接口请求出错时自动统一弹出错误提示不用每个接口单独写 catch// axios响应式拦截器http.interceptors.response.use(resres.data,e{ElMessage({type:warning,message:e.response.data.message})returnPromise.reject(e)})3.巩固Pinia管理数据由于用户数据的特殊性在很多组件中都有可能进行共享共享的数据使用Pinia管理会更加方便遵守理念;和数据相关的所有操作(state action)都放到Pinia中组件只负责触发action函数// 管理用户数据相关import{defineStore}frompiniaimport{ref}fromvueimport{loginAPI}from/apis/userimport{useCartStore}from./cartStoreexportconstuseUserStoredefineStore(user,(){// 1. 定义管理用户数据的stateconstuserInforef({})// 2. 定义获取接口数据的action函数constgetUserInfoasync({account,password}){constresawaitloginAPI({account,password})userInfo.valueres.result//合并购物车的操作))}// 3. 以对象的格式把state和action returnreturn{userInfo,getUserInfo,}},{//持久化persist:true,})组件引用script setupimport{useUserStore}from/stores/userconstuseStoreuseUserStore()useStore.getUserInfo({account,password})/script4.请求拦截器携带TokenToken作为用户标识在很多个接口中都需要携带Token才可以正确获取数据,所以需要在接口调用时携带Token。另外为了统一控制采取请求拦截器携带的方案。// axios请求拦截器http.interceptors.request.use(config{constuserJSON.parse(localStorage.getItem(user)||{})consttokenuser.userInfo?.tokenif(token){config.headers.AuthorizationBearer${token}}returnconfig},ePromise.reject(e))5.Token失效401拦截处理Token的有效性可以保持一定时间,如果用户一段时间不做任何操作, Token就会失效使用失效的Token再去请求一些接口接口就会报401状态码错误这时我们可以在响应拦截器统一做处理。// axios响应式拦截器http.interceptors.response.use(resres.data,e{//当接口返回401登录过期/未登录时自动清除用户信息并跳转到登录页。if(e.response.status401){localStorage.removeItem(user)router.push(/login)}returnPromise.reject(e)})杂项知识点useRouter和useRoute两者区别useRoute 用来 “读” 当前路由信息参数、路径useRouter 用来 “动” 路由跳转、返回。eg:import{useRoute}fromvue-routerconstrouteuseRoute()// 获取用户ID123constuserIdroute.params.id// 登录成功后替换当前页禁止返回登录页router.replace(/dashboard)总结今天学到了关于登录页的很多知识点也了解到了很多统一处理的方法。如果我的内容对你有帮助请点赞评论收藏。创作不易大家的支持就是我坚持下去的动力