Vue Router - 从beforeEach内部传递数据

Question

我很难将beforeEach(to, from, next) Vue-Router中间件内的数据（在本例中为userInfo-Token）传递给同时响应的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 （＆＃39;。/&# 39;组件）

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

到目前为止我做了什么： 我尝试从Entry-Point传递userInfo - ＆gt;路由器 - ＆gt;组件作为属性。然而，由于信息是不同步的，它没有用。

我尝试将beforeEach内的数据附加到元对象。但我发现自己无法访问Component内部的元对象。

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

提前谢谢。

Answer 1

我会使用Vuex来处理这个问题，not use an arrow function是一个状态管理库。

您需要使用创建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存储。

然后你可以通过调用userData来设置你的axios回调中的store.commit，这将随后在Vuex商店中调用指定的变异（这将要求你也有对Vuex的引用{ {1}}此范围内的对象）：

store

您可以通过axios.post('http://localhost:4000/auth').then((result) => { store.commit('SET_USER_DATA', result); next(); }); 对象从任何组件访问userData：

$store

通知我还更新了export default { computed: { welcomeMsg() { let { userName } = this.$store.state.userData || {}; return (userName) ? 'Hello ' + userName : ''; } } } 计算以修复拼写并更新为