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

Question

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

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

场景描述如下

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

我想的解决方法有

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

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

Answer 1

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

Answer 2

promise吧

Answer 3

我有点懵不太理解。用户登录后后端不是会设置cookie把用户登录验证信息存进去嘛，后面所有的请求都会带上cookie后端还会不知道用户信息吗？

Answer 4

1. 单例模式啦 如果有值就直接返回已经获取的值 而不再去执行函数 (闭包 面向对象都能实现)
2. 请仔细看下 vue-router 路由元信息的部分 那个例子就是现成的 有个全局的路有钩子根据路由系上面配置的信息 去调接口 然后安排跳转

Answer 5

其实你已经接近答案了。

因为获取用户信息是公用的, 所有我在入口文件调接口拿用户信息, 并且存在vuex内, 然后在每个业务页面之间拿vuex里的用户数据就好了
但是, 这就导致有可能进入页面的时候, 用户信息还没返回, 所有拉取数据的接口就不对了

所以你需要做的是，对于依赖用户信息的页面，强制它必须在用户信息获取之后再渲染。有很多办法可以实现这一点，比如其他人提到的，在流程上控制，得到用户信息后再渲染页面。SPA 一般也就是这么做的。

如果是另一种情况，页面上某些信息是依赖用户信息的，有些不是，这个时候，完全等待用户信息再渲染页面可能不是一个最好的办法。具体情况还是要具体分析。就这样。