项目笔记27（尚品汇）

登录注册（二）

用户登录携带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界面会发生如下情况。这个问题后续解决。