How to directly redirect user to home page if user is already logged in in nativescript-vue?

nativescript-vue router
nativescript authentication
nativescript login
nativescript forms
nativescript authguard
nativescript logout
session in nativescript
nativescript backend service

I want to redirect a user to the home page if they are already logged in, otherwise redirect to login page.

How can I solve this in nativescript-vue?

I assume you are passing Login component to the render function in app.js. You could write a condition statement there, pass Home component if user is logged in already.

If you have to hit server for validating the token, either you could use a loading page Or navigate to home with clear history option once the validation is done.

Implementing a Login for NativeScript Apps with Tab-based , The main usage for NativeScript's auxiliary page router outlets is in lateral So far so good, but what if we want to have some other pages that shouldn't be inside a TabView (which is already the root component) e.g. a login page? two master/details pages will be shown in separate tabs and the user will� Teams. Q&A for Work. Stack Overflow for Teams is a private, secure spot for you and your coworkers to find and share information.

You could also check database( like sqlite or loki) for login status, in my case i check db from app.js then if status is 1 go to home page else go to login page, am not using {N}vue but plain(vanilla Js) but its the same, Heres code from App.js

if (  model.isAvailable ==true) {
    var whichPage=true;
    console.log(" User found");
}else{
    whichPage=false;
        console.log("Going to Acount page !");
}

var pageToload= whichPage ? "home":"status";
application.start({ moduleName: pageToload })
;```
Change it to how you like to handle it, model.isAvaillable() is a function that checks the Db for login status

Building an Awesome Login Screen with NativeScript, Let's start diving into how this works by looking at the user interface exact same application using NativeScript Core or NativeScript with Vue. of the submit button based on whether the user is currently logging in or signing up. to automatically show validation messages directly in the user interface. Teams. Q&A for Work. Stack Overflow for Teams is a private, secure spot for you and your coworkers to find and share information.

Vue Router appears to be unsupported right now according to the documentation (https://nativescript-vue.org/en/docs/routing/vue-router/).

You can probably achieve what you're trying to do with something like this:

const token = localStorage.getItem('token')

const shopId = localStorage.getItem('shop_id')

let userLoggedIn = false

if (token && shopId) { userLoggedIn = true }

new Vue({ render: h => h('Frame', [h(userLoggedIn ? Home : App)]) }).$start()

I tried to use the logic you provided on 2/20.

Getting Your Route On with NativeScript-Vue: Episode Two, In part two of this blog series on routing in NativeScript-Vue apps, If someComponent pointed to a Cat component, but then later to a Now let's look at the code. import Vue from 'nativescript-vue'; import Home from '. Since the first "page" of our application is hard coded, it's just typed directly in there. In this tutorial, we will see how to quickly build a web application with an authentication system using Vue 2, vue-router and Firebase. Vue.js is very easy to use, powerful and well documented.

OAuth 2, OAuth 2 generic authorization plugin for NativeScript that doesn't install third in NativeScript applications that provides simplified direct client access with a You don't need to do this if you already have <page-router-outlet> in your component. NativeScript-Vue. If console.log("back to main page with access token: ");. Most apps need to know the identity of a user. Knowing a user's identity allows an app to securely save user data in the cloud and provide the same personalized experience across all of the user's devices. Firebase Authentication provides backend services, easy-to-use SDKs, and ready-made UI libraries to authenticate users to your app.

Manual Routing, Invoke $navigateTo(<propertyName>) in the view directly. For example, having a button in the side bar that changes the page in the main area. The prop is now accessible throughout the component with this.id . This means that when the user comes back to a previous tab, the data, scroll position and navigation state� Stack Overflow | The World’s Largest Online Community for Developers

Simple User Login in a Vue.js Web Application, For example, it should only be accessed if the user has logged in. Now create a src/views/login.vue file with the following code: from trying to directly navigate to a protected page while not authenticated. We've imported each of our two components and set the root path to redirect to our login screen. Add the time needed. For example, when the user successfully logged in, we need to redirect to the home route programmatically. only if you run npmvue init pwa vue-calculator-pwa. Jan 04, 2019 · @vue/cli-plugin-pwa should take care of creating a Service Worker. webpack is a module bundler.

Comments
  • Depends on your implementation, backend solution, your storage approach etc. So, give as much required detail and code snippets as possible.
  • When first time user install and open app , then login into app we store user info in localstorage. Then again user when open the app, based on localstorage data app should redirect to home page
  • Sorry that's a good question, I haven't been using NativeScript-Vue recently. They used to support it partially earlier, but with latest version it's marked as unsupported.
  • Any alternate solution
  • I dont understand
  • if(localStorage.getItem('token') != null && localStorage.getItem('shop_id') != null){ new Vue({ render: h => h('frame', [h(Home)]) }).$start(); } else{ new Vue({ render: h => h('frame', [h(App)]) }).$start(); } Correct???
  • Yes, I think that should do.