Vue路由器beforeeach在硬刷新后不起作用答案

【问题标题】：Vue router's before each doesn't work after hard refreshVue路由器beforeeach在硬刷新后不起作用
【发布时间】：2020-10-19 07:13:55
【问题描述】：

我在使用 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')

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

<v-list-item two-line>
    <v-list-item-avatar>
        <!-- <v-img max-width="40px" contain src="../assets/P.png" class="ma-2"></v-img> -->
        <img src="https://randomuser.me/api/portraits/men/32.jpg">
    </v-list-item-avatar>

    <v-list-item-content>
        <v-list-item-title>{{userInSession.prenom | capitalize}} {{userInSession.nom | capitalize}}</v-list-item-title>
        <v-list-item-subtitle>{{userInSession.role | capitalize}}</v-list-item-subtitle>
    </v-list-item-content>
</v-list-item>

这是我从 vuex 访问的同一个对象。如果有人有线索，将不胜感激。

【问题讨论】：

标签： javascript vue.js vuejs2 vuex vuetify.js

【解决方案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'))
        }
    }

而且它工作得很好，我想知道我是否可以将路由器放在商店之后，并且该钩子刷新并且仍然在受保护的页面上，如果有人知道那么很好，如果不是那将是一个问题进一步搜索/测试:)

【讨论】：