如何在各个子组件中,等待登录状态验证之后,再做后续操作?

功能概述

SPA应用,后端是laravel5.5,前端vue全家桶。主要完成一个blog系统。

问题描述

后端使用了laravel-passport验证,在获取blog列表时,需要分未登录和登录的情况,前端根据spa教程中的:

    computed: {
      ...mapState({
        user: state => state.AuthUser,
        blog: state => state.BlogList
      })
    },
    ...
    // 判断是否登录,继而调用不同接口  
    if (this.user.authenticated) { } 

此时直接从blog列表进入单个blog的时候没有问题。
当刷新单篇blog的时候,获取验证状态还没结束,就已经调用未登录情况下获取blog列表的接口。

如何在各个子组件中,等待登录状态验证之后,再做后续操作?

Yawenina

我想了两种实现:

  1. “假登录”,用户登录后存相应信息到 LocalStorage, 然后如果 LocalStrorage 有相应的数据就认为是登录。
  2. 设置一个 authenticating 属性,获取用户登录信息时,设置 authenticating = true, 验证成功设置为
    false, 判断 !authenticating && this.user.authenticated 则获取相应的信息。
xiaowuya123

如果用了vue的router, 可以用router的beforeEach , 你可以理解为laravel的中间件