Best way to save User-Token in NativeScript Application

Question

I want to build a login-system for users into my {N}-App. When logged in successfully I receive a token that I need to perform requests. At the moment I store this via application-settings Module. Now I want the UI to switch between "Login-Screen" and "Personal Information" Screens when the user is logged in. The user can use certain features of the application when he is not logged in, so the login is just a tab on the sidebar.

So from my point of view either the route has to change to another component (and I had to check that whenever the app is opened) or I can change the component overlay depending on whether the the user-token is saved or not. Is there a possibility to do this? (I have to define certain things in my component-annotation in my .ts-file, so the easiest way would be to manipulate this one).

I am having the name of the tab defined once in the Route and once in my routing directory either way, so I think I have to modify my routing anyway.

My idea:

//router definition
path: "Main", component: MainPage, children: [
    (appSettings.getBoolean("isLoggedIn") == true) ?
        {path:  "Login", component: LoginPage} : 
        {path: "My Account", component: LoginPage}
    ]

Which did (of course) not work. Any other approaches?

Edit:

I might not have described my problem very well: I have an application that has a sidebar. On that sidebar is a "Login"-Label. Whenever a user wants to log in he can simply hit it and enter his credentials. When the user is logged in, I want this "Login"-Label to disappear and instead do something like "Account", where he can see his personal information. He does not have any permissions to access new pages of the application. So all I want is to change the sidebar-entry and the overlay of that certain page.

Answer 1

We have achieved something similar using angular's auth guard. You can find a nice answer here

Basically you configure auth guard with something like this :

@Injectable()

export class AuthGuard implements CanActivate {

    auth: any = {};

    constructor(private authService: AuthService, private router: Router) {

    }

    canActivate() {
        if (/*user is logged in*/) {
            this.router.navigate(['/dashboard']);
            return true;
        }
        else {
            this.router.navigate(['/login']);
        }
        return false;
    }
}

And in your router configuration you use it as follows :

const routes: Routes = [
    { path: '', redirectTo: '/login', pathMatch: 'full' },
    { path: AppKeys.Paths.login, loadChildren: () => require(AppKeys.Paths.loginModule)['LoginModule'], canLoad: [AuthGuard]}
];

AFTER EDIT

If I understood your problem correctly you need to do something much simpler. Basically you can use the routerLink directive and some conditional text in the listview item... something like this :

<Button text="{{ isLoggedin ? 'login' : 'personal info' }}" [nsRouterLink]="[isLoggedin? '/login' : '/personalinfo' ]"></Button>

In the component you will have a isLoggedin variable that is initialized with whatever value is stored in the app settings.

I haven't tested the code and you will need to adapt it (not button but listview item, paths etc) but this is the general idea behind it :)