时间戳

首页 > 解决方案 > 如何在 vue-router 之前运行一些东西

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

问题描述

我正在构建我的第一个 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 状态或者它可以访问，但尚未设置该值。

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

标签： vuejs2vuexvue-router

解决方案

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

在 app.js 结束时，我使用 Axios 通过 Ajax 检索当前用户。在thenPromise 的方法中，我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']),
    });
}

推荐阅读