Vue роутер - при обновлении окна браузера выходит из системы мой администратор - PullRequest
Новая
       3

Vue роутер - при обновлении окна браузера выходит из системы мой администратор

1 голос
/ 18 февраля 2020

У меня есть метод router.beforeEach, который отлично работает при прохождении через vue маршрутизатор, но при обновлении страницы я возвращаюсь обратно 

router.beforeEach((to, from, next) => {
    if(to.matched.some(record => record.meta.isAdmin)) {
        if (store.getters.isAdmin) {
            next();
            return;
        }

        next('/dashboard');

    } else {
        next();
    }
});

Так что, даже если мой статус администратора «admin», я все равно получаю перенаправлен на приборную панель. Любые идеи, почему!

РЕДАКТИРОВАТЬ :

Вот как я вхожу в систему пользователя и сохраняю их сеанс / токен 

import Vue from 'vue';
import Vuex from 'vuex';
import axios from 'axios';

Vue.use(Vuex);

// set up our api end point 
var get_url = window.location;
var base_url = get_url .protocol + '//' + get_url.host;
const api_base = base_url + '/api/v1';

export default new Vuex.Store({
    state: {
        status: false,
        token: localStorage.getItem('token') || '',
        user: {}
    },
    mutations: {
      auth_request(state){
        state.status = 'loading';
      },
      auth_success(state, {token, user}) {
        state.status = 'success';
        state.token = token;
        state.user = user;
      },
      auth_error(state){
        state.status = 'error';
      },
      logout(state){
        state.status = '';
        state.token = '';
      },
      set_user(state, user) {
        state.user = user;
      }
    },
    actions: {
      login({commit}, user){
        return new Promise((resolve, reject) => {
          commit('auth_request');
          axios({url: api_base + '/login', data: user, method: 'post' })
          .then(resp => {
            const token = resp.data.data;
            localStorage.setItem('token', token);
            axios.defaults.headers.common['Authorization'] = token;
            commit('auth_success', {token, token});
            resolve(resp);
          })
          .catch(err => {
            commit('auth_error');
            localStorage.removeItem('token');
            reject(err);
          });
        });
      },
    },
    getters : {
      isLoggedIn: state => !!state.token,
      authStatus: state => state.status,
      getUser: state => state.user,
      isAdmin: state => state.user.admin
    }

  });

Итак, я Я храню токен в localStorage - я не уверен, что локальное хранилище действительно работает, так как я не знаю, как просмотреть содержимое моего локального хранилища (хотя представьте, что это легко узнать).

1 Ответ

0 голосов
/ 18 февраля 2020

Я сделаю некоторые предположения о вашем приложении, так как я не знаю деталей, но вот мое мнение.

Когда ваше приложение изначально загружено (т.е. на странице refre sh), Vuex состояние установлено на начальные значения, что означает, что пользователь не вошел в систему. Пользователь должен go через процесс входа в систему, который обеспечивает ваше приложение, а затем состояние Vuex обновляется информацией о вошедшем в систему пользователе.

Если вы обновите sh страницу, ваше состояние Vuex будет потеряно, и вам придется go снова выполнить процесс входа в систему.

Если вы хотите сохранить данные при перезагрузке страницы, вам придется хранить некоторые данные на стороне клиента (обычно в LocalStorage ). Как именно это делается, может варьироваться от приложения к приложению, поскольку оно зависит от того, как вы реализовали вход в сеансы; Вы храните сеанс в Cook ie, или вы используете токен авторизации, который вы отправляете с каждым запросом?

Когда приложение изначально загружено, первое, что нужно сделать, это проверить, сохранен зарегистрированный сеанс, и если это так, попытайтесь подтвердить его подлинность, чтобы убедиться, что он все еще действителен, и получить с сервера актуальную информацию об этом сеансе (т. е. информацию о зарегистрированном пользователе). Как минимум, вы можете сохранить пользовательский объект в LocalStorage после входа в систему, а затем получить его при загрузке приложения.

Это большой топик c, и я не могу дать вам краткий ответ здесь, но Я дал вам кое-что подумать, чтобы вы могли исследовать эту топику c дальше.

...