vue.js 生命周期和页面刷新未按预期工作

Question

即使刷新页面或在浏览器的地址栏中输入链接，我也需要用户保持登录状态。

我在 store 中创建了一些方法来保存和加载用户数据到本地存储。

在 main.js 我在 created 钩子中加载我需要的数据，如下所示：

new Vue({
    el: '#app',
    router,
    store,
    render: h => h(App),
    created() {
        this.$store.dispatch('loadUser');
        const user = this.$store.getters.getUser;
        console.log(`VUE app created. Logged-in user: ${user.username}`);
    }
});

在 routes.js 我有一个 beforeEnter 钩子

path: '/account',
    component: Account,
    beforeEnter: (to,from,next) => {
        const user = Store.getters.getUser;
        console.log(`Should go to /account, user is ${user.username}`);
        if (!user.username) {
            next('/');
        } else {
            next();
        }
    }

我希望 vue 应用程序创建在路由器方法之前运行，但事实并非如此。当我刷新 /account 页面时，首先调用路由器 beforeEnter 钩子，然后调用应用程序创建。所以我的用户是未知的，而不是刷新 /account 页面，我被重定向到带有登录屏幕的根页面。

当用户之前登录并且他的凭据（JWT 令牌）在本地存储中时，我如何获得预期/想要的行为，页面刷新将转到请求的页面而不是被重定向，为什么是路由器方法在 vue created 钩子之前调用？

我的 vue.js 版本是 2.8.2

Answer 1

您不必在created 中发送您的操作。在你到达你的路由器之前调度它。

store.dispatch('loadUser')
// create or import router
// create Vue