vue.js - vuex 配合 vue-router 在路由跳转前获取用户ID

问题描述

问 题

目前的H5项目是内置在某第三方App里的，用户进入我们的H5，需要先访问一个借口（比如：getUserId）获取用户在我们服务器上的ID，再通过这个ID获取用户的数据，比如用户写的文章。

用户ID存储在vuex中

请问怎么在路由跳转前先获取用户ID 再跳转路由呢

我想到的有以下方法，但是获取之后怎么存储到 store 中呢？

router.beforeEach(transition => {
    // 访问接口获取用户ID
    getUserId().then(res => {
        transition.next();
    });
});

另一个方法是在 App.vue 根组件中获取，这样可以存储进 store ，但是此时路由已经跳转了，会导致页面打开的一刻获取不到数据.

ready() {
    getUserId().then(res => {
        // 显示 <router-view></router-view>
        this.loadingRouteData = false;
    });
}

所以怎么样先获取用户ID， 存储到 store 里面，再跳转路由呢？

解决方案

感谢大家的查看，感谢阿发的指导，
vue-router 里面可以通过 router.app 引用根组件，改成下面这样就可以了。
userId 存在 store 里面，getUserId 是一个 action

  router.beforeEach(transition => {
    if(router.app.userId) {
      transition.next();
    } else {
      router.app.getUserId().then(() => {
        transition.next();
      });
    }
  });

这篇关于vue.js - vuex 配合 vue-router 在路由跳转前获取用户ID的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！