Проблема с Vuex

Question

Настроил защиту роутов state.user.isAdmin Отвечает за то что Мы вошли или нет.

Если там поставить false. То после каждой перезагрузки Vue пересылал на страницу входа

При входе я добавляю в локальное хранилище логин и пароль, а так же временый штамп на сутки. По истечение 24 часа надо входить снова

И при загрузки надо делать запрос входа, вдруг поменялся пароль или что то еще

let isAdmin
const res = JSON.parse(localStorage.getItem('login'))

if (res) {
  if (new Date() < res.timeStamp) {
    isAdmin = true
  }
} else {
  isAdmin = false
}

export default {
  state: {
    user: {
      isAdmin: isAdmin
    }
  },
  mutations: {
    login(state) {
      state.user.isAdmin = true
    },
    logout(state) {
      state.user.isAdmin = false
    }
  },

Вопрос как это лучше сделать. Пробовал уже ставить в основной layout и в разных хуках использовал. Пытался сделать это мутацией, но ничего не помогло кроме этого костыля.

Только начал знакомится с vuex. С этим можно что то сделать?

const res = JSON.parse(localStorage.getItem('login'))

if (res) {
  if (new Date() < res.timeStamp) {
    isAdmin = true
  }
} else {
  isAdmin = false
}

Если что вот эта логика + тут же надо делать запрос

Answer 1

Вам бы для начала вынести логику работы с locaStorage в отдельный сервис, например у вас будет директория services и в ней будет файл localstorage.service.js:

const AUTH_DATA_TOKEN = 'login';

export default {
  setAuthData: (data) => window.localStorage.setItem(
    AUTH_DATA_TOKEN,
    JSON.stringify(data),
  ),

  getAuthData: () => JSON.parse(
    window.localStorage.getItem(AUTH_DATA_TOKEN) || {},
  ),

  getAuthStatus: () => {
    const { timeStamp } = JSON.parse(window.localStorage.getItem(AUTH_DATA_TOKEN) || {});
    return new Date() < timeStamp;
  },
};

Затем мы импортируем наш ls service в сторе и используем наши геттеры (тут мы делаем просто грубую инкапсуляцию работы с вашими данными авторизации, вообще если это реальный проект, то стоит начать использовать JWT токены и настроить хуки для работы с авторизацией, вот неплохой пример приложения с настроенной авторизацией и роутинг хуками, а вот расписанный процесс построения приложения):

import LSService from '~/services/localstorage.service.js'

export default {
  state: {
    isAuth: LSService.getAuthStatus(),
  },
  // остальные элементы вашего стора
};

Когда вы инициализируете ваше приложение с isAuth: false, то любой хук обработает это как указание на логин редирект, вам нужно при инициализации приложения получить данные из ls, проверить таймстамп, если всё ок, то пускать, иначе пересылать в логин. В документации описано, как работать с хуками для авторизации, так же в ссылках выше есть решения для auth настроек.

БЛОГ НА HUSL

Проблема с Vuex

Ответы (1 шт):