NativeScript Vue - условная активация на основе состояния входа пользователя

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

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

  1. Когда пользователь открывает приложение, где в приложении мы должны написать код для получения данных для входа пользователя. Я хотел бы прочитать данные из локального хранилища и заполнить их в магазине Vuex. Я знаю, как читать данные из localstorage, но я не знаю, где и когда мне это делать, чтобы пользователь вошел в систему с самого начала.

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

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


nativescript javascript vuejs2 nativescript-vue
person asanas    schedule 19.04.2019    source источник

Ответы (2)


arrow_upward
3
arrow_downward

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

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();
    }
});
person Just_lbee    schedule 25.04.2019

arrow_upward
2
arrow_downward

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

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

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