vuejs2 - 如何让某些东西在 vue-router 之前运行

Question

我正在构建我的第一个 SPA，但我遇到了一些问题。它是这样设计的:

1. Laravel 和 Laravel Views 处理登录和注册相关页面。
2. SPA 从用户登录页面开始。
3. 我的 app.js 定义了一个默认的 VueJS 应用程序，我在其中使用 mounted() 方法来设置登录用户的状态 (VUEX)。理想情况下，它所做的只是通过对 Laravel 后端的 axios 调用获取用户详细信息并填充 VUEX 状态。
4. 我在路线定义中使用 beforeEnter() 方法来确保只有授权人员才能导航到该路线。

这就是我面临的问题。当用户登录时，似乎在设置 vuex 之前执行了路由器。假设我有一个 url/dashboard 和/user/1。当我尝试转到 user/1 时，如果它是在我加载应用程序之后，它会完美运行。但是，如果我在 user/1 中刷新网页，则路由器 beforeEnter 无法找到用户的 vuex 状态，因此它将用户重定向到仪表板。这是因为当路由器运行 beforeEnter 时，如果它是一个新的页面加载，它将无法访问用户 Vuex 状态或者它可以访问，但尚未设置该值。

因此，我最大的问题是我无法直接链接到路线页面，因为它总是位于仪表板中，然后用户必须转到路线才能正常工作。我该如何处理这种情况？

Answer 1

这就是我最终所做的。我定义了一个用于初始化 Vue 的函数。

在 app.js 的末尾，我使用 Axios 通过 Ajax 检索当前用户。在 promise 的 then 方法中，我将 store 设置为我在 promise 中收到的用户详细信息，然后调用我在上面为 Vue 初始化定义的函数。这样，当 vue 初始化时，商店用户已经拥有数据。

代码更改非常少，我不必更改现有的 axios 实现。

这是我的新实现:

Axios.get('/api/user/info')
    .then(response => {
        (new Vue).$store.commit('setUser', response.data);
        initializeVue();
    })
    .catch(error => initializeVue());

function initializeVue()
{
    window.app = new Vue({
        el: '#app',
        router,
        components: {
            UserCard,
            Sidebar,
        },
        methods: mapMutations(['setUser']),
        computed: mapState(['user']),
    });
}