Vue 路由器在硬刷新后每个都不起作用

Question

我遇到了 Vue.js 的新问题，我正在使用我的登录页面登录我的应用程序，一切正常，如果它是管理员配置文件，它会转到管理页面，普通用户会转到主页。

但是如果我是管理员并且我用 F5 硬刷新页面然后我不能再去管理页面。我想我知道我的插件调用顺序有问题，我需要在路由器之前调用我的 localStorage，但我没有为 localStorage 使用插件。

这是代码，首先是路由器的 beforeEach 函数：

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

  let user =  await store.getters.userInSession;

  let token = await store.getters.getToken;

  if(to.matched.some(record => record.meta.requiresAuth) && token == '') {

    next({ name : 'Connexion'})

  } else if (to.matched.some(record => record.meta.is_admin) && user.role  != "Admin"){

    next({ name: 'Tableau de bord'})

  } else if(to.matched.some(record => record.meta.guest) && token != '') {

    next({ name: 'Tableau de bord'})

  } else {

    next();

  }

})

然后这是我从 vuex 访问我的 localStorage 的方式：

import Vue from 'vue';

import router from '../../router';

const state = {

    token: localStorage.getItem('token'),

    user: localStorage.getItem('user'),

    errors: []

};

const getters = {

    isAuthenticated: state => !!state.token,

    userInSession: state => {

        return state.user;

    },

    isAdmin: state => {

        return state.user ? state.user.role == 'Admin' : false

    },

    getToken: state => {

        return state.token ? state.token : "";

    }

};

我尝试使用 vue-localstorage 并将其放在路由器之前的 Vue 实例中，但我什至不知道如何全局设置它。它没有被识别为 pluginObject，所以我不能用这个来做 Vue.use。

无论如何我试过这个：

import Vue from 'vue';

import App from './App.vue';

import router from './router';

import store from './store';

import VueLocalStorage from 'vue-localstorage';

import vuetify from './plugins/vuetify';

new Vue({

  VueLocalStorage,

  router,

  store,

  vuetify,

  render: h => h(App)

}).$mount('#app')

我认为最后一件事是相关的，但我不确定，我在 my 中显示了我的用户信息，并且在一次硬刷新之后它也消失了......我这样称呼它：

它与我从 vuex 访问的对象相同。如果有人有线索，将不胜感激。

Answer 1

我通过在创建 vue 实例的地方创建一个钩子解决了我的问题：new Vue({  router,  store,  beforeCreate() { this.$store.commit('INITIALISATION_STORE') },  vuetify,  render: h => h(App),}).$mount('#app')我只是像这样在 mutator 中初始化我的商店：INITIALISATION_STORE(state) {        if(localStorage.getItem('token')){            state.token = localStorage.getItem('token')        }        if(localStorage.getItem('user')) {            state.user = JSON.parse(localStorage.getItem('user'))        }    }它工作得很好，我想知道我是否可以把路由器放在商店后面，那个挂钩要刷新并且仍然在受保护的页面上，如果有人知道那么很好，如果不是那将是进一步搜索的问题/测试 ：）