Nativescript-angular: Remove page from stack after login

[eleddie]

I know this has been asked a lot but I don't seem to find a working solution.

My app has a login page and after the user has logged in, the app goes to the main page, so far so good.
I also keep the session alive so that the user doesn't have to log in evey time the app is launched. This is done by saving a token in application settings and choose which page is going to be the default page.

After the user logs into the app, if he/she clicks the back button (I disabled the status bar in iOS to try to avoid this behavior but android still has the back button) the app goes back to the login page. I want to delete that login page from history so when the user taps the back button the application closes. Just like if I did finish() in native android activities

I've read something about backstackVisible but I don't know how to implement it with the router of angular2

Thanks in advance.

[vakrilov]

Currently, there is no way to do backstackVisible using the angular router. Its a feature that we hope to implement soon as the demand is high.

For now you can try one of the following approaches:

• You can implement an authentication guard to intercept the initial navigation and redirect to login. The next time app is started after the token is read form app settings - the guard will let the navigation pass -> no login page in back-stack. There is already a branch of the groceries app that does that: check auth.guard.ts and app.routes.ts
• You can use a modal dialog to show a login dialog in your first page if login is needed. The dialog will not be saved in the navigation-stack.

[vakrilov]

I have reopened the issues about backstackVisible/clearHistory. You can track it here: #284

[eleddie]

@vakrilov Thanks for your reply and for reopening the #284 issue.
I thought about executing code when the app goes back to the login page so if the user is logged in it goes back to the main page. It isn't the behavior I want but I can live with it while you are working on the new router. I saw there is the alpha version of the router 3.0.0.

The problem is that I don't know how to execute the code when the page calls, for example, the OnResume() method (in native android development). I am using ngOnInit() but it gets called only once like the constructor. Is there any way a piece of code can be executed when the page is resuming?

[vakrilov]

Just to clarify: there is already support for the 3.0.0 router in the current version(0.1.8). Actually my first suggestion with the auth.guard is based on the new routers guards feature.

On your question - you can inject the Page in you component constructor (trough DI) and and attach to navigatedTo/navigatingTo events with on(). You can also read the isBackNavigation property form the args of the event to apply additional logic.

[Onkarn92]

Hi @vakrilov, Is there any updates about backstackVisible/clearHistory? I'm using latest router now, but I'd like to implement clearHistory feature as i'm using login screen. Please check my question on stackoverflow at your convenience. Thanks :)

[m-abs]

@Onkarn92 ClearHistory have just been implemented:
https://github.com/NativeScript/nativescript-angular/pull/368

[vakrilov]

Yup, I have also added a login example using the clear history and guards.

Closing this issue - please reopen if needed.

[sagar1911]

Hi,

How to remove a particular page from navigation ??
Let say

I am navigating to page3 from page1 via page2. when user clicks on page3 back button I don't want him to see page2 I want him to go to page1.
Is it possible in NS-Core ???
page1 -> page2 -> page3
page3 (Back) -> page1

Thanks.

[blackrek]

How to remove a particular page from navigation ??

when you navigate from page2 to page3 try to use router.navigate('page3url', { replaceUrl: true })

[sagar1911]

Hi @blackrek ,

THanks for the reply.
I didn't understood the term router here. Here is my code, will u please tell me where to place your code snippet ??

var navigationOptions = {
moduleName: 'views/pond/view-pond-log/view-pond-log',
context: {
pondid: pondidValue,
pondName: viewModel.pondName
},
}
frameModule.topmost().navigate(navigationOptions);

note: I am using vanilla nativescript
thanks.

[vakrilov]

@sagar1911 If you are not using angular it is better to post the issue in the https://github.com/NativeScript/NativeScript repo. Here we are discussing angular and the navigation in angular apps should always be done trough the angular router abstraction ;)

[sagar1911]

okay @vakrilov ,
got it

[bhavincb]

Hi @vakrilov

How to remove a particular pages from navigation ??
Let say

I am navigating to page2 from page1, page 3 from page2 and so on like this page1 ->page2->page3->page4->page5.

now i want to remove page2 and page4 from stack so that when user clicks hardware back button i want navigation to behave like this page5->page3->page1->exit

[vakrilov]

Hey @bhavincb
There is currently no direct way to modify the navigation stack. One thing we are considering is to implement navigation the backstackVisible=false. However, it is not yet implemented for angular.

There are some ways to workaround this using modal views. You can check #284 where we discussed one such scenario.

[bhavincb]

hi @vakrilov ,
if there is currently no direct way to modify the navigation stack. then please mark it as feature request/ because there are many use-cases available where we need to modify navigation stack. this feature should be implemented when using angular.

[vakrilov]

Sure - can you log a new issue about that?

[bhavincb]

yes sure.

[bhavincb]

hii @vakrilov ,
i had created issue here.

1244