NativeScript Vue-基于用户登录状态的条件化

Question

我正在使用NativeScript-Vue。

我有一些受保护的页面（仅限会员）。我将用户的登录数据保存在localstorage中。我有两个问题：

1. 当用户打开应用程序时，我们应该在应用程序中的哪个位置编写代码以检索用户的登录数据。我想从本地存储中读取数据并将其填充到Vuex存储中。我知道如何从localstorage读取数据，但是我不知道应该在何时何地进行操作，以便用户可以首先登录。

2. 有几个页面受到保护（仅限成员）。对于这些用户，如果他们已登录（基于vuex存储），我想向他们显示页面内容，但是如果他们未登录，我希望他们导航到登录页面。同样，我对于应该在何处编写此代码/条件感到困惑。

任何帮助表示赞赏。

Answer 1

1. 使用renderVue 构造函数，从本地存储读取数据并根据身份验证状态返回适当的Frame/ 。Component

就像是，

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

2. 仅当用户登录时，您才会导航到受保护的页面。因此，每次导航之前，您都会检查登录标志。可以编写一个实用函数来在检查标志后处理导航。注销后，只需调用navigateTo登录组件并将clearHistory其设置为 true 即可。