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

Question

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

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

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

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

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

Answer 1

Для навигации по компонентам также можно использовать клавишу 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();
    }
});

Answer 2

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

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

new Vue({
    render: h =>  h('Frame', [h(LS.getItem('loggedIn') ? HomeComponent : LoginComponent)])
}).$start();

Вы будете переходить на защищенные страницы, только если пользователь вошел в систему. Поэтому каждый раз перед навигацией вы должны проверять флаг входа.Может быть напишите полезную функцию, которая обрабатывает навигацию после проверки флага.После выхода из системы просто позвоните navigateTo с компонентом входа и clearHistory, установленным в true.