Je travaille dans mon application Ionic 4 et j'ai créé le système de connexion / enregistrement.
Lorsque l'utilisateur se connecte, après cela, l'utilisateur pourra visiter la page et lorsque l'utilisateur ne se connecte pas et essaie de visiter la page, il sera redirigé vers la page de connexion.
C'est mon userlogin.page.ts
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { TabsPage } from './tabs.page';
import { AuthenticationGuard } from '../guards/authentication.guard';
const routes: Routes = [
{
path: 'tabs',
component: TabsPage,
children: [
{
path: 'tab1',
children: [
{
path: '',
loadChildren: '../tab1/tab1.module#Tab1PageModule'
}
]
},
{
path: 'tab2',
canActivate: [AuthenticationGuard],
children: [
{
path: '',
loadChildren: '../tab2/tab2.module#Tab2PageModule'
}
]
},
{
path: 'tab4',
children: [
{
path: '',
loadChildren: '../login/login.module#LoginPageModule'
}
]
},
{
path: 'tab3',
children: [
{
path: '',
loadChildren: '../tab3/tab3.module#Tab3PageModule'
}
]
},
{
path: '',
redirectTo: '/tabs/tab1',
pathMatch: 'full'
}
]
},
{
path: '',
redirectTo: '/tabs/tab1',
pathMatch: 'full'
}
];
@NgModule({
imports: [
RouterModule.forChild(routes)
],
exports: [RouterModule]
})
export class TabsPageRoutingModule {}
Dans ce ts, après la connexion réussie, je stocke l'identifiant de l'utilisateur et l'utilisateur sera redirigé vers la page tab2.
Et lorsque l'utilisateur ne se connecte pas et essaie de visiter la page tab2, il sera redirigé vers la page d'inscription.
Ceci est mon application. component.html :
import { Component } from '@angular/core';
import { Platform, AlertController } from '@ionic/angular';
import { SplashScreen } from '@ionic-native/splash-screen/ngx';
import { StatusBar } from '@ionic-native/status-bar/ngx';
import { PopoverController } from '@ionic/angular';
import { PopoverPage } from './popover/popover.page';
import { Storage } from '@ionic/storage';
import { Router } from '@angular/router';
@Component({
selector: 'app-root',
templateUrl: 'app.component.html'
})
export class AppComponent {
menuclick = true;
menuclick2 = false;
constructor(
private platform: Platform,
private splashScreen: SplashScreen,
private statusBar: StatusBar,
public popoverController: PopoverController,
public alertController: AlertController,
private storage: Storage,
private router: Router
) {
this.initializeApp();
this.storage.get('ID').then((val) => {
if (val) {
this.menuclick2 = true;
this.menuclick = false;
}
});
}
initializeApp() {
this.platform.ready().then(() => {
this.statusBar.styleDefault();
this.splashScreen.hide();
});
}
logoutClicked() {
this.storage.remove('ID').then(() => {
this.menuclick2 = false;
this.menuclick = true;
this.router.navigate(['/tabs/tab1']);
});
}
}
Ceci est mon app.component.ts final:
<ion-app>
<ion-header>
<ion-toolbar color="myheader">
<ion-title color="myheadtitle" slot="end" *ngIf="menuclick">Register/Login</ion-title>
<ion-title color="myheadtitle" slot="end" (click)="logoutClicked()" *ngIf="menuclick2">Logout</ion-title>
</ion-toolbar>
</ion-header>
<ion-router-outlet></ion-router-outlet>
</ion-app>
3 Réponses :
Vous pouvez essayer de conserver l'en-tête au niveau de la page, supprimez-le de app.component.html et placez-le dans votre user.login.html. En général, conservez l'en-tête et les boutons de connexion / déconnexion au niveau de la page, si vous les conservez dans app.component et la logique dans app.component.ts, vous aurez peut-être besoin d'un service ou pour utiliser des événements
<ion-header>
<ion-toolbar color="myheader">
<ion-title color="myheadtitle" slot="end" *ngIf="menuclick">Register/Login</ion-title>
<ion-title color="myheadtitle" slot="end" (click)="logoutClicked()" *ngIf="menuclick2">Logout</ion-title>
</ion-toolbar>
</ion-header>
Une autre méthode consiste à afficher le bouton de déconnexion en grisé pendant que vous récupérez les données du stockage. Ce serait absolument confortable et prévisible pour l'UX.
quelque chose comme ceci: avec la partie appropriée dans le module: this.storage.get ('ID'). Then ((val) => {this.isLoaded = true; if (val) {this.menuclick2 = true; this.menuclick = false;}});
Créez un service utilisateur:
<ion-toolbar color="myheader"> <ion-title color="myheadtitle" slot="end" *ngIf="menuclick">Register/Login</ion-title> <ion-title color="myheadtitle" slot="end" (click)="logoutClicked()" *ngIf="userService.isLoggedIn$ | async">Logout</ion-title> </ion-toolbar>
Après la connexion de l'utilisateur à la page de connexion, émettez une nouvelle valeur pour UserService # isLoggedIn en utilisant la méthode UserService # logIn code>. Abonnez-vous à l'observable UserService # isLoggedIn $ dans le composant d'application et actualisez la vue en fonction de l'observable à l'aide de async pipe .
EDIT: Modèle pour afficher le bouton de déconnexion lorsque l'utilisateur est connecté en fonction de UserService # isLoggedIn $ .
import { Injectable } from '@angular/core';
import { BehaviorSubject } from 'rxjs';
@Injectable({
providedIn: 'root'
})
export class UserService {
private isLoggedIn = new BehaviorSubject<boolean>(false);
public isLoggedIn$ = this.isLoggedIn.asObservable();
constructor() { }
public logIn() {
this.isLoggedIn.next(true);
}
public logOut() {
this.isLoggedIn.next(false);
}
}
Merci pour le service. Pouvez-vous également coder pour les boutons?
L'introduction d'un service basé sur les observables semble un peu excessive pour contrôler un seul booléen.
@JayOrdway Probability dans une application du monde réel, vous avez plus de responsabilités liées à l'utilisateur que vous pouvez utiliser
UserService pour. Ceci n'est qu'un exemple pour le but de cette question.
Je ne suis pas dans le cadre Ionic mais le problème réside probablement dans la façon dont vous obtenez l '
IDà partir du stockage dansapp.component.ts. L'ID est résolu dans le constructeur du composant d'application et n'est pas mis à jour après (la connexion par exemple). Pensez à créer un sujet dans lequel vous stockerez, que l'utilisateur soit connecté ou non. Il peut ressembler àMessagesServicedans cette démo stackblitz.com/edit/angular- xe52wh@Bardr. Quelle est la solution pour cela? Pouvez-vous m'aider avec le code?