Vue Router - 从 beforeEach 内部传递数据

Question

我很难将数据（在本例中为 userInfo-Token）从 beforeEach(to, from, next) Vue-Router 中间件内部传递到相应的 Vue-Component。我正在处理 Vue-SinglePage 组件文件，如下所示：

App.js（入口点）

<template>
    <div id="app">
        <Navigation/>
        <router-view/>
        <Footer/>
     </div>
</template>

Router.js（路由器视图）

routes: [
    {
        path: '/',
        meta: {requiresAuth: true}
    }
]

router.beforeEach((to, from, next) => {

    if(to.meta.requiresAuth){
        // getting token form local storage
        const token = localStorage.getItem('id_token');

        // retrieving User Information
        axios.defaults.headers.common['Authorization'] = "Bearer "+  token;
        axios.post('http://localhost:4000/auth').then((result) => {
            next();  // <-- how will the following component be able to work with the result?
        } 
    }
}

Dashboard.js（'./'组件）

export default {
    computed: {
        welcomMsg: () => 'Hello '   + result.userName
    }   
}

到目前为止我做了什么：我尝试将 userInfo 从 Entry-Point -> Router -> Component 作为属性传递。然而，由于信息是异步的，它没有工作。

我试图将 beforeEach 中的数据附加到元对象。但是我发现自己无法访问组件内部的元对象。

也许我的做法是完全错误的。在这种情况下：有没有更好的方法将收到的 UserData 传递给 Vue 组件 并使它们在那里可用？

提前致谢。

Answer 1

我会使用 Vuex 来处理这个问题，它是一个状态管理库。

您需要创建一个 Vuex 模块并将其添加到您的根 Vue 实例，如下所示：

const store = new Vuex.Store({
  state: { userData: {} },
  mutations: {
    SET_USER_DATA: (state, data) => state.userData = data,
  }
});

new Vue({     // your root Vue instance
  el: '#app', // or whatever you've bound to root instance to
  store,      // the reference to the Vuex store
  ...         // the rest of the root Vue definition
})

现在，根 Vue 实例及其所有内部组件将通过 $store 属性.

引用 Vuex 存储

然后你可以通过调用 store.commit 在你的 axios 回调中设置 userData，这将随后调用 Vuex Store 中的指定突变（这需要你也有对Vuex store 这个范围内的对象):

axios.post('http://localhost:4000/auth').then((result) => {
  store.commit('SET_USER_DATA', result);
  next();
});

并且您可以通过 $store 对象从任何组件访问 userData：

export default {
  computed: {
    welcomeMsg() {
      let { userName } = this.$store.state.userData || {};
      return (userName) ? 'Hello ' + userName : '';
    }
  }
}

注意我还更新了 welcomeMsg 计算以修复拼写和

Vue Router - 从 beforeEach 内部传递数据

Vue Router - Passing Data from inside beforeEach

javascript

asynchronous

vue.js

vue-router

vue-component