Login in a PWA


#1

I have a project with a Login Page, but I don´t like how work, somebody can help me please

My login work fine, but if I use the browser to access to localhost:8100, there is a small moment in which I see the menu and after that redirected to LoginPage, but I don’t want to see the menu if I’m going to be redirected to Login

The second problem is when refresh the browser, if you are in any page different to root you are going to be redirected the root page, it is fine if the session expire, but if my session is valid I’ld like to stay on that page

This is mi code in app.htlm

<ion-split-pane when="lg">
    <ion-menu [content]="content" class="MyClass">
        <div class="BGMENU">

            <img src="assets/imgs/LogoBlack.png" class="logoMenu">
            <button menuClose *ngFor="let p of pages" (click)="openPage(p)">
                {{p.tittle}}
            </button>
        </div>
    </ion-menu>
    <ion-nav [root]="rootPage" main #content swipeBackEnabled="false"></ion-nav>
</ion-split-pane>

My app.component.ts

import { Component, ViewChild } from '@angular/core';
import { Nav, Platform, MenuController } from 'ionic-angular';
import { StatusBar } from '@ionic-native/status-bar';
import { SplashScreen } from '@ionic-native/splash-screen';
import { DataBaseProvider } from './../providers/data-base/data-base';
@Component({
templateUrl: 'app.html'
})

export class MyApp {
  rootPage: string;
  @ViewChild(Nav) nav: Nav;
  pages: Array<{ tittle: string, component: any }> = [];

  constructor(
    private platform: Platform,
    private statusBar: StatusBar,
    private splashScreen: SplashScreen,
    private readonly Ahtu: DataBaseProvider,
    private menuCtrl: MenuController
  ) {
    this.menuCtrl.enable(false)
    this.initializeApp()
  }

  initializeApp() {
    this.Ahtu.Connection.subscribe(session => {
      if (session.Connected) {
        if (session.Access == 'FirstLevel') {
          this.rootPage = 'HomePage'
          this.pages = [{ tittle: 'Inicio', component: 'HomePage' },
          { tittle: 'Page 2', component: 'Page2Page' },
          { tittle: 'PAge 3', component: 'Page3Page' },
          { tittle: 'Page 4', component: 'Page4Page' }]
          
        }
        else if (session.Access == 'SecondLevel') {
          this.rootPage = 'Home2Page'
          this.pages = [{ tittle: 'Other Page', component: 'OtherPage' },
          { tittle: 'Other 2', component: 'Other2Page' }]
        }
      }
      else this.rootPage = 'LoginPage'
    })
    this.platform.ready().then(() => {
      this.statusBar.styleDefault();
      this.splashScreen.hide();
    });
  }
  openPage(page) {
    this.nav.setRoot(page.component);
  }
}

My Provider DataBaseProvider.ts

import { Socket } from 'ng-socket-io'
@Injectable()

export class DataBaseProvider {
    private Authenticated:BehaviorSubject<ISession>
    
    constructor(private socket: Socket, private storage: Storage) {
        this.Authenticated = new BehaviorSubject<ISession>({Connected:false,User:'',Access:'',email:''})
        this.storage.get('SESSION').then(session => {
            if (session) {
                jwt.verify(session, '*****', (err, decoded) => {
                    if (decoded) {
                        this.Authenticated.next({Connected:true,User:decoded.name,Access:decoded.position,email:decoded.email})
                    }
                    else this.Authenticated.next({Connected:false,User:'',Access:'',email:''})
                });
            }
            else this.Authenticated.next({Connected:false,User:'',Access:'',email:''})
        })
        this.init();
    }
}