NativeScript Vue - 사용자의 로그인 상태에 따른 조건부 내성

NativeScript Vue - 사용자의 로그인 상태에 따른 조건부 내성

나는 NativeScript-Vue를 사용하고 있다.

보호되는 페이지가 몇 개 있다(회원 전용).그리고 사용자의 로그인 데이터를 로컬 저장소에 보관한다.두 가지 질문이 있다:

1. 사용자가 앱을 열 때, 애플리케이션 어디에 사용자의 로그인 데이터를 검색하기 위해 코드를 작성해야 한다.로컬 스토리지에서 데이터를 읽고 Vuex 스토어에 채우십시오.로컬 스토리지에서 데이터를 읽는 방법은 알고 있지만 사용자가 로그인하기 위해 어디서 언제 해야 하는지 모르겠다.

2. 보호되는 페이지가 몇 장 있다(멤버 전용).이러한 사용자의 경우 로그인한 경우(vuex 스토어 기준) 페이지 콘텐츠를 보여주고 싶지만 로그인하지 않은 경우 로그인 페이지로 이동하도록 하고 싶다.다시 한번 나는 이 코드/조건이 어디에 쓰여져야 하는지 혼란스럽다.

어떤 도움이라도 감사하다.

구성요소를 탐색하기 위해 사용 가능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();
    }
});

1. 사용renderVue 생성자에서 로컬 스토리지의 데이터를 읽고 적절한 반환Frame/Component인증 상태에 따라.

뭐랄까,

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

2. 사용자가 로그인한 경우에만 보호된 페이지로 이동하십시오.따라서 탐색하기 전에 매번 로그인 플래그를 확인하십시오.플래그를 확인한 후 내비게이션을 처리하는 유틸리티 기능일 수 있다.로그아웃 시 전화만 하십시오.navigateTo로그인 구성 요소 및clearHistory진상을 밝히다

참조URL: https://stackoverflow.com/questions/55756182/nativescript-vue-conditional-nativation-based-on-users-login-state