Блог

У меня возникла новая проблема с 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) amp;amp; token == '') {
    next({ name : 'Connexion'})
  } else if (to.matched.some(record => record.meta.is_admin) amp;amp; user.role  != "Admin"){
    next({ name: 'Tableau de bord'})
  } else if(to.matched.some(record => record.meta.guest) amp;amp; token != '') {
    next({ name: 'Tableau de bord'})
  } else {
    next();
  }
})
  

Затем вот как я получаю доступ к своему локальному хранилищу из vuex:

 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, и после жесткого обновления она также исчезает…
Я называю это так:

 <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.
Был бы признателен за помощь, если у кого-то есть подсказка.

Я решил свою проблему, создав перехват, в котором создается мой экземпляр vue:

 new Vue({
  router,
  store,
  beforeCreate() { this.$store.commit('INITIALISATION_STORE') },
  vuetify,
  render: h => h(App),
}).$mount('#app')
  

Я просто инициализирую свой магазин в мутаторе следующим образом:

 INITIALISATION_STORE(state) {
        if(localStorage.getItem('token')){
            state.token = localStorage.getItem('token')
        }
        if(localStorage.getItem('user')) {
            state.user = JSON.parse(localStorage.getItem('user'))
        }
    }
  

И это работает просто отлично, мне интересно, могу ли я поместить маршрутизатор после хранилища и этот хук для обновления и по-прежнему находиться на защищенной странице, если кто-то знает, тогда отлично, если нет, это будет вопрос дальнейшего поиска / тестирования 🙂