0

我的 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() 然后重新加载页面并尝试连接它也不起作用。

你知道它为什么这样做吗？

4

0 回答 0