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

问题

I have come up with an implementation of access control for a nativescript app but the android back button breaks it.

Scenario:

1. Open the app
2. press login
3. press back button in android (The app will be minimized)
4. Open the app again (you are supposed to see that you are logged in but you see that you appear to be logged out)
5. Now actually close the app
6. Open the app again (You will see that you were actually logged in but the app was displaying the wrong page for you)

How can I fix this issue? What is the propper way to stay logged-in in a nativescript-vue app?

Here is a playground sample

回答1:

It happens sometimes with global variables, I didn't manage to track how exactly but a hot fix is to use a function.

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

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

回答2:

Here is my initial solution:

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>

I chose to create a new proxy component but the same thing can be done without that by creating hooks in Login and Main.

Of cource @Manoj's asnwer is so much more brilliant, I just posted this so people can see alternative hacks.

来源：https://stackoverflow.com/questions/60464590/back-button-in-android-breaks-nativescript-vue-access-control-login-logout