这样的业务场景如何更加优雅?

Question

有这样一个实际业务下的场景, 应该比较常见.

技术栈为常见的 vue + vue router + vuex

场景描述如下

应用为spa, 前端路由, 所有数据交互走接口
每个页面都有一些接口, 都在页面初始化的时候就调用这些接口拉取数据, 但是这些接口需要带上用户信息, 所以又依赖于用户信息的接口, 所以必须先通过接口拿到用户信息
因为获取用户信息是公用的, 所有我在入口文件调接口拿用户信息, 并且存在vuex内, 然后在每个业务页面之间拿vuex里的用户数据就好了
但是, 这就导致有可能进入页面的时候, 用户信息还没返回, 所有拉取数据的接口就不对了

我想的解决方法有

1. 每个页面都调拉取用户信息的接口, 已有用户信息直接返回用户信息, 没有的话就去拉取(每个页面都得写一下, 虽然工作量也不大)

2. 入口内调用 拉取用户信息, 用户信息没返回前, 不进入页面

这里只是大概描述了一下, 没代码, 你们都是怎么做的?

Answer 1

在根组件利用Promise去拉取用户信息，待得到数据之后，做你想做的操作（比如把数据存入localStorage，或者把数据存入vuex store） 再开始渲染其它组件