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

Posted 2023-04-13

【中文标题】android中的后退按钮打破nativescript-vue访问控制登录注销

【英文标题】：back button in android breaks nativescript-vue access control login logout

【发布时间】：2020-06-13 07:36:57

【问题描述】：

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

场景：

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

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

这是playground sample

【参考方案1】：

它有时会发生在全局变量中，我没有设法准确地跟踪，但热修复是使用函数。

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


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

【讨论】：

太棒了！我的解决方法是在这些组件中使用加载的钩子并导航。这好多了！太感谢了。我今天学到了一件很棒的事情。

【参考方案2】：

这是我最初的解决方案：

app.js

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

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

在.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 的 asnwer 更加出色，我只是发布了这个，以便人们可以看到替代黑客。