android 中的后退按钮破坏了 nativescript-vue 访问控制登录注销

Question

我想出了一个 nativescript 应用程序的访问控制实现，但 android 后退按钮破坏了它。

场景：

打开应用程序
按登录
在 android 中按后退按钮（应用程序将被最小化）
再次打开应用（您应该看到您已登录，但您看到您似乎已注销）
现在实际关闭应用程序
再次打开应用（您会看到您实际上已登录，但应用程序为您显示了错误的页面）

我该如何解决这个问题？在 nativescript-vue 应用程序中保持登录状态的正确方法是什么？

Answer 1

有时全局变量会发生这种情况，我没能准确地追踪到，但热修复是使用函数。

function isLoaddedIn() {
    return ApplicationSettings.getString('is_logged_in') == 'true';
}

new Vue({
    render: h => h('frame', [h(isLoaddedIn() ? In : Out)])
}).$start()

Answer 2

这是我的初步解决方案：

app.js

import Vue from 'nativescript-vue';
import Proxy from './components/Proxy';

new Vue({render: h => h('frame', [h(Proxy)])}).$start();

In.vue

<template>
  <Page>
    <ActionBar title="Logged in" />
    <button text="Logout" @tap="logout" />
  </Page>
</template>

<script>
  import * as ApplicationSettings from 'tns-core-modules/application-settings';
  import Out from './Out';

  export default {
    methods: {
      logout() {
        ApplicationSettings.setString('is_logged_in', 'false');
        this.$navigateTo(Out, {
          clearHistory: true,
        });
      },
    },
  };
</script>

Out.vue

<template>
  <Page>
    <ActionBar title="Not Logged in" />
    <button text="Login" @tap="login" />
  </Page>
</template>

<script>
  import * as ApplicationSettings from 'tns-core-modules/application-settings';
  import In from './In';

  export default {
    methods: {
      login() {
        ApplicationSettings.setString('is_logged_in', 'true');
        this.$navigateTo(In, {
          clearHistory: true,
        });
      },
    },
  };
</script>

Proxy.vue

<template>
  <Page @loaded="startMyApp">
    <ActionBar title="Proxy" />
    <label text="hello" />
  </Page>
</template>

<script>
  import * as ApplicationSettings from 'tns-core-modules/application-settings';
  import In from './In';
  import Out from './Out';

  export default {
    methods: {
      startMyApp() {
        const is_logged_in = ApplicationSettings.getString('is_logged_in');
        const target_page = is_logged_in == 'true' ? In : Out;
        this.$navigateTo(target_page, {
          clearHistory: true,
        });
      },
    },
  };
</script>

我选择创建一个新的代理组件，但没有它也可以通过在 Login 和 Main 中创建挂钩来完成同样的事情。

当然，@Manoj 的回答要精彩得多，我只是发布了这个，以便人们可以看到其他技巧。

android 中的后退按钮破坏了 nativescript-vue 访问控制登录注销

back button in android breaks nativescript-vue access control login logout

android

nativescript

nativescript-vue