我正在Ionic 4应用程序中工作，并已完成登录/注册系统。
用户登录后，此后该用户将能够访问该页面，而当用户未登录并尝试访问该页面时，它将重定向到登录页面。
这是我的 userlogin.page.ts ：
async UserLoginDetails($soctype, $socid) {
const loading = await this.loadingController.create({
message: 'Please Wait',
duration: 1100,
translucent: true,
});
await loading.present();
const userdetailslogin = {
email: this.userlogindet.value.email,
password: this.userlogindet.value.password,
social_type: $soctype,
social_id: $socid,
};
this.chakapi.loginUser(userdetailslogin, 'userLogin').subscribe((data) => {
// console.log(data);
if (data) {
this.responseEdit = data;
if (this.responseEdit.status === 'success') {
// console.log(this.responseEdit.data.id);
this.storage.set('ID', this.responseEdit.data.id);
this.presentAlertConfirm('Login Successful', 1);
} else {
this.presentAlertConfirm('Either You are not registered Or not approved user.', 0);
}
}
});
return await loading.onDidDismiss();
}
async presentAlertConfirm($messge, $para) {
const alert = await this.alertController.create({
message: $messge,
buttons: [
{
text: 'Cancel',
role: 'cancel',
cssClass: 'secondary',
handler: () => {
// console.log('Confirm Cancel: blah');
if ($para === 1) {
this.modalController.dismiss();
this.router.navigate(['/tabs/tab2']);
}
}
}]
});
await alert.present();
}
在这种情况下，成功登录后，我将存储用户ID，该用户将重定向到tab2页面。
当用户未登录并尝试访问tab2页面时，它将重定向到注册页面。
这是我的 app.component.html ：
<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>
这是我的 app.component.ts ：
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']);
});
}
}
在这个ts文件中，我具有登录和注销按钮的逻辑。
但是问题在于，用户登录后我无法立即启动注销按钮。
这是我的 tabs.router.module.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 {}
请任何人建议，这是显示登录和注销按钮的好方法。
问题在于，用户登录后我无法立即显示注销按钮。
我知道为此，我必须创建一个服务。所以，有人可以帮我提供代码吗？
非常感谢您的帮助。
答案 0 :(得分：1)
您可以尝试将标题保留在页面级别，因此将其从app.component.html中删除，然后将其放在user.login.html中。通常，将页眉和登录/注销按钮保持在页面级别，如果确实将它们保留在app.component中，将逻辑保留在app.component.ts中，则可能需要服务或使用事件
<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>
答案 1 :(得分：1)
另一种方法是，从存储中获取数据时，注销按钮显示为灰色。对于UX来说绝对是舒适和可预测的。
答案 2 :(得分：1)
创建用户服务：
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);
}
}
用户在登录页面登录后，使用方法UserService#isLoggedIn为UserService#logIn发出新值。在应用程序组件中订阅可观察的UserService#isLoggedIn$，并使用async pipe基于可观察的刷新视图。
编辑：用于根据UserService#isLoggedIn$登录用户时显示“注销”按钮的模板。
<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>