项目笔记23（尚品汇）

2022-04-19 244 阅读4分钟

一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第18天，点击查看活动详情

登录注册（二）

用户登录携带token获取用户信息

书写获取用户信息的接口

在这里插入图片描述

接下来书写vuex

在这里插入图片描述

考虑应该在什么时候发送请求，按照正常的逻辑，用户输入完账号密码点击登录后，页面应该跳转到home中，此时header不应该是“请登录|免费注册”而是应该展示用户的信息。因此这个请求应该在home挂载完成的时候发起。

在这里插入图片描述

此时当用户输入完信息登录之后，页面效果如下。出现这个问题的原因是，此时获取不到用户的数据，在请求头中只有一个游客身份，为了解决这个问题，需要拿到用户的token。

在这里插入图片描述

接下来回到api文件夹，去找请求拦截器。由于之前已经在仓库中存储了token,此时可以直接判断是否有token，同时根据将其放在请求头中。此时已经有token。

在这里插入图片描述

在这里插入图片描述

有了token之后，需要在此利用vux存储用户信息

在这里插入图片描述

此时输入正确的账户与密码，页面效果如下

在这里插入图片描述

接下来将“请登录|免费注册”更改为用户信息。由于修改的地方在Header组件中，因此首先找到Header组件，利用计算属性拿到用户名

在这里插入图片描述

随后对展示信息做一个判断，如果有用户名就展示用户名，如果没有就展示“请登录|免费注册”。此处还有个问题，就是用户登录完成后，当用户一刷新，页面就重新渲染成“请登录|免费注册”，出现这个问题的原因是当用户刷新，仓库中的token就变为了“”。

解决上述刷新的问题

上述问题出现的原因就是vuex是非持久化存储，因此为了解决这个问题可以利用本地存储，当用户登录的时候，将token存储到本地。同时将默认token变为本地存储的token。如果用户登录了那么token就是用户的token，如果一直没有用户登录，那么本地也就没有token，因此等价于token为空。

在这里插入图片描述

此时当用户在首页刷新的时候，上方显示的还是用户信息。

解决其他模块不加载用户信息的问题

解决方法一(不完美)

但是现在还存在一个问题，就是当用户在search或者购物车等模块中进行刷新，页面显示的还是“请登录|免费注册”。针对这个问题只需要在这些模块挂载的时候，发送一个获取用户信息的action即可。

在这里插入图片描述

这个解决方案不太完美，因为当用户手动跳转到login界面会发生如下情况。这个问题后续解决。

在这里插入图片描述

退出登录的制作

退出登录需要清除token以及本地存储的内容。首先找到退出登录，绑定一个点击事件，名为logout

在这里插入图片描述

在logout中需要完成两件事 1.发请求，通知服务器退出登录 2.清除项目中的数据

首先还是书写接口

在这里插入图片描述

接下来三连环

在这里插入图片描述

退出登录写完之后，回到Header组件发送action，同时注意，一旦退出登录成功，则系统应该返回首页。

在这里插入图片描述

导航守卫

当用户登录了，按理说用户不可以回到登录页面为了解决这个问题，首先设置全局守卫，具体如下所示

在这里插入图片描述

接下来在全局守卫进行判断，如果此时有token证明用户登录过，则此时不能跳转到登录页面。为了进行判断，则需要获取store的数据，因此在router文件夹下的index.js文件中import引入store

在这里插入图片描述

此时当用户登录，用户则无法跳转到login页面

解决其他模块不加载用户信息的问题

解决方法（二）

在上一篇中我们提到了解决方法一，但是不够完美，在这我们可以利用全局守卫，来解决这个问题

在这里插入图片描述