Question

我的Vue应用程序有问题，路由器上的身份验证仅在第一页加载时有效...

我所有的路由都在中间件下检查它们是否被记录，所以我的路由器看起来像这样：

import Vue        from 'vue'
import Router     from 'vue-router'
import store      from './store'

Vue.use(Router);

let router = new Router({
    mode: 'history',
    routes: [
        {
            path: '/',
            name: 'root',
            component: resolve => require(['./views/Root.vue'], resolve),
            meta: {
                pageTitle: `Index`,
            }
        },
        {
            path: '/authentication/',
            name: 'authentication',
            component: resolve => require(['./views/Login.vue'], resolve),
            meta: {
                pageTitle: `Connexion`,
                authNotRequired: true,
            }
        },
    ],
});

router.beforeEach((to, from, next) => {
    //Si l'Utilisateur est authentifié :
    if (!store.getters.isLoggedIn && !to.matched.some(r => r.meta.authNotRequired)) {
        next({ name: 'authentication' });
    }
    else {
        next();
    }
});

export default router;

我的会话存储非常简单：

import Vue from 'vue'
import Vuex from 'vuex'
import VuexPersist from 'vuex-persist'

Vue.use(Vuex);

const vuexLocalStorage = new VuexPersist({
    key: 'my.personal.key',
    storage: window.localStorage,
})

export default new Vuex.Store({
    plugins: [vuexLocalStorage.plugin],
    state: {
        session: {
            sessionId: null,
        },
    },
    getters: {
        isLoggedIn: (state) => {
            return (state.session.sessionId !== null);
        },
    },
    mutations: {
        save(state, session) {
            state.session = session;
        },
        destroy(state) {
            state.session = {};
        },
    },
    actions: {
        save(context, payload) {
            return new Promise((resolve, reject) => {
                context.commit('save', payload);
                resolve();
            });
        },
        destroy(context) {
            return new Promise((resolve, reject) => {
                context.commit('destroy');
                resolve();
            });
        }
    }
});

所以我的登录功能也很简单：

/* THE FORM WAS SUCCESSFULLY SENT TO THE API WHICH ANSWERED {obj.id: 456} */
onLogIn(obj) {
    this.$store.dispatch('save', { sessionId: obj.id }).then(() => {
        this.$router.push({ name: 'root' });
    });
},

因此，此代码在启动应用程序后可以正常工作，如果我断开连接并重新连接，则重定向可以正常工作...从根本上来说，一切工作都很好... 但是，当用户首次加载页面并登录时，路由器未推送新路由，因此用户仍停留在身份验证页面上，但会话已更改（如果我放置了console.log，商店中的sessionId）

我真的不明白为什么重定向在第一次加载时不起作用，我发现当我执行localStorage.clear（）然后重新加载页面并尝试连接页面时也无法正常工作。

您知道为什么要这么做吗？

Vue Router：功能推送不适用于商店修改

0 个答案: