Блог

Главная - Вопросы по программированию - NativeScript Vue — Условная инициализация на основе состояния входа пользователя в систему

NativeScript Vue — Условная инициализация на основе состояния входа пользователя в систему

#javascript #vuejs2 #nativescript #nativescript-vue

#javascript #vuejs2 #nativescript #nativescript-vue

Вопрос:

Я использую NativeScript-Vue.

У меня есть несколько защищенных страниц (только для пользователей). И я сохраняю данные для входа моего пользователя в localstorage. У меня есть два вопроса:

  1. Когда пользователь открывает приложение, где в приложении мы должны написать код для получения данных входа пользователя. Я хотел бы прочитать данные из локального хранилища и заполнить их в хранилище Vuex. Я знаю, как считывать данные из localstorage, но я не знаю, где / когда я должен это сделать, чтобы пользователь вошел в систему для начала.
  2. Есть несколько защищенных страниц (только для пользователей). Для этих пользователей я хочу показать им содержимое страницы, если они вошли в систему (на основе хранилища vuex), но если они не вошли в систему, я хочу, чтобы они переходили на страницу входа. Опять же, я не понимаю, где должен быть написан этот код / условие.

Любая помощь приветствуется.

Ответ №1:

Для навигации по компонентам вы также можете использовать meta key в объекте route. Пример:

 import VueRouter from 'vue-router'

const routes = [
  {
    path: '/',
    name: 'home',
    component: MainWindow,
    meta: {
      requiresAuth: true,
    }
  },
  {
    path: '/login',
    name: 'login',
    component: Login,
    meta: {
      guest: true
    }
  }
]

const Router = new VueRouter({
  routes,
  mode: 'history',
});

Router.beforeEach((to, from, next) => {
  const userData = localStorageAuth.getUserData();

  if (to.matched.some(record => record.meta.requiresAuth)) {
    if (userData.token === null) {
      next({
        path: '/login',
        params: {nextUrl: to.fullPath}
      })
    } else {
        next();
    }
});

Ответ №2:

  1. Используйте конструктор render in Vue, считайте данные из локального хранилища и возвращайте соответствующий Frame / Component на основе статуса аутентификации.

Что-то вроде,

 new Vue({
    render: h =>  h('Frame', [h(LS.getItem('loggedIn') ? HomeComponent : LoginComponent)])
}).$start();
  1. Вы будете переходить к защищенным страницам, только если пользователь вошел в систему. Поэтому каждый раз перед навигацией вы должны проверять флаг входа в систему. Может быть, написать служебную функцию, которая обрабатывает навигацию после проверки флага. После выхода из системы просто вызовите navigateTo компонент login и clearHistory установите значение true.

Комментарии:

1. Я не могу этого сделать. Потому что защищенная страница — это не моя первая страница. Это еще одна страница в приложении, на которую пользователь переходит при просмотре приложения. Можно ли это сделать с помощью чего-то вроде mount или fetch?

2. Как я упоминал в # 2, используйте общую функцию для навигации, которая проверяет состояние входа в систему перед началом самой навигации. Вы не можете сделать это при монтировании, так как это происходит после инициализации компонента. Или вы можете сделать это в mount, если вы не возражаете против повторного закрытия страницы, когда пользователь не вошел в систему. Это зависит исключительно от того, как вам нравится это делать.

Метки: