Vue.js搭配Laravel时获取已授权用户数据的正确方式是什么

两种方案没有绝对的正确/错误之分，核心看你的业务需求，以下是两者的优劣势对比和实践建议：

方案1：登录接口同步返回用户信息 #

• 优势：
  • 减少1次HTTP请求，弱网下登录后页面加载速度更快，不会出现导航栏用户信息延迟加载的闪烁问题
  • 实现逻辑更简单，无需额外处理获取用户信息的请求异常场景，代码量更少
• 劣势：
  • 本地存储的用户信息容易过期，后续用户修改昵称、头像等资料后，需要手动同步更新Vuex和localStorage里的存储，否则会出现前端展示和服务端数据不一致的问题
  • 登录接口职责过重，不符合RESTful接口单一职责的设计规范，后续扩展多端登录时，容易出现返回字段冗余的问题

方案2：登录后单独请求用户信息 #

• 优势：
  • 接口职责清晰，登录接口仅负责下发accessToken，用户信息统一走/api/user通用接口获取，后续页面刷新、用户信息更新时都可以复用该接口，维护成本更低
  • 每次拉取的都是服务端最新的用户数据，不会出现本地缓存和服务端数据不一致的问题
  • 适配Laravel生态的默认设计，不管你用Sanctum还是Passport做认证，官方都自带了现成的用户信息获取接口，几乎不需要额外开发
• 劣势：
  • 多1次HTTP请求开销，弱网下可能会出现短暂的用户信息占位情况
  • 需要额外处理异常场景：比如拿到token后请求用户信息失败时，要做兜底的登出逻辑，清除本地存储的无效token

实践建议 #

绝大多数场景下优先选方案2。
如果你担心加载闪烁问题，可以在全局路由守卫里加逻辑：未拉取到用户信息时显示全局loading，等用户信息请求返回后再渲染页面，体验上和方案1几乎没有差异。
只有当你的项目对登录后首屏加载速度要求极高，且用户个人资料基本不会变更的情况下，再考虑选方案1。

内容的提问来源于stack exchange，提问作者Andrey Chul