Vue项目的记录（十三）

最新推荐文章于 2023-05-04 15:30:31 发布

Fantastick

最新推荐文章于 2023-05-04 15:30:31 发布

阅读量2.6k

点赞数 1

分类专栏： vue项目篇文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/weixin_44482737/article/details/127456169

版权

vue项目篇专栏收录该内容

17 篇文章 0 订阅

订阅专栏

这篇博客探讨了前端登录注册流程，包括静态资源管理、验证码模拟、表单数据收集与接口调用。还涉及Vuex状态管理，以及用户信息的非持久化存储问题。在登录业务中，指出了页面刷新导致用户信息丢失的问题，并提出了使用HTML5本地存储的解决方案。同时，通过路由守卫解决跨页面用户状态保持和重复登录的问题。退出登录时，需要清除本地token并更新用户信息。

摘要由CSDN通过智能技术生成

1.登录注册静态组件

在这里插入图片描述
assets这个文件夹放所有的组件公用的静态资源

在样式当中也可以使用@符号，（src目录的别名），要注意的是在前面你加上~

2.注册业务

这里的验证码，正常来说应该是要后台发送到用户手机上，然后用户再输入的，但是我们没有钱，就简单模拟这个功能就好了。其次，收集表单的数据
在这里插入图片描述

获取验证码接口，然后vuex三连环。

然后将user合并到大仓库中

接着点击验证码的时候获取到验证码并将自动填入到表单中

继续收集表单的数据

创建和调用注册用户的接口

3.登录业务

收集表单数据
在这里插入图片描述

创建接口 vuex三连环

点击登录事件（这里有个路径问题，需要将他处理，阻止提交表单的默认行为）

4.用户携带token获取用户信息

PS: vuex存储数据是非持久化的，一旦刷新之后数据就没有了
用户登录只保存用户的token，添加token校验获取用户登录信息（接口 + vuex三连环）
在这里插入图片描述

用户登录成功后跳转到 home页面，页面挂载后，派发action获得用户信息

但是这里有一个问题就是服务器没有带到token的信息，只带了UUID的临时游客id，所以登录了之后，还是显示未登录，因此需要在请求拦截器中的请求头中添加token的信息
在这里插入图片描述

这样就添加了登录用户的token，我们也是通过这个唯一的token来获得用户信息

将用户信息显示在Header中，很简单，v-if 即可
Header中获得userInfo里面的name属性

效果：