在我的离子应用(v-4)中,登录后,我将user_id
像这样存储在local storage
中:
onLogin(){
localStorage.setItem('user_id', this.loginForm.user_id);
}
我将login page
设为landing page
,在login page
之后,用户将被路由home page
。此路由工作正常。
但是如果用户打开app
,它又应该显示home page
作为登录页面,因为该应用程序已经将user_id
存储在其local storage
中。
代码
app.component.html
<ion-router-outlet main></ion-router-outlet>
app.component.ts
import { Component } from '@angular/core';
import { Platform } from '@ionic/angular';
import { SplashScreen } from '@ionic-native/splash-screen/ngx';
import { StatusBar } from '@ionic-native/status-bar/ngx';
@Component({
selector: 'app-root',
templateUrl: 'app.component.html'
})
export class AppComponent {
constructor(
private platform: Platform,
private splashScreen: SplashScreen,
private statusBar: StatusBar
) {
this.initializeApp();
}
initializeApp() {
this.platform.ready().then(() => {
this.statusBar.styleDefault();
});
}
}
app.module.ts
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RouteReuseStrategy } from '@angular/router';
import { IonicModule, IonicRouteStrategy } from '@ionic/angular';
import { SplashScreen } from '@ionic-native/splash-screen/ngx';
import { StatusBar } from '@ionic-native/status-bar/ngx';
import { AppComponent } from './app.component';
import { AppRoutingModule } from './app-routing.module';
import { HttpClientModule } from '@angular/common/http';
import { HttpModule } from '@angular/http';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
@NgModule({
declarations: [AppComponent],
entryComponents: [],
imports: [
BrowserModule,
IonicModule.forRoot(),
AppRoutingModule,
HttpModule,
HttpClientModule,
FormsModule,
ReactiveFormsModule ,
],
providers: [
StatusBar,
SplashScreen,
{ provide: RouteReuseStrategy, useClass: IonicRouteStrategy }
],
bootstrap: [AppComponent]
})
export class AppModule {}
app.routing.module.ts
import { NgModule } from '@angular/core';
import { PreloadAllModules, RouterModule, Routes } from '@angular/router';
const routes: Routes = [
{
path: '',
redirectTo: 'login',
pathMatch: 'full'
},
{
path: 'home',
loadChildren: './home/home.module#HomePageModule'
},
{ path: 'login', loadChildren: './login/login.module#LoginPageModule' },
{ path: 'my-profile', loadChildren: './my-profile/my-profile.module#MyProfilePageModule' },
{ path: 'appointments', loadChildren: './appointments/appointments.module#AppointmentsPageModule' },
{ path: 'request-acceptance', loadChildren: './request-acceptance/request-acceptance.module#RequestAcceptancePageModule' },
];
@NgModule({
imports: [
RouterModule.forRoot(routes, { preloadingStrategy: PreloadAllModules })
],
exports: [RouterModule]
})
export class AppRoutingModule { }
我发现了类似的 question ,但我无法在我的应用程序中使用它。
答案 0 :(得分:1)
配置一个防护措施,如果用户登录,该防护措施将重定向到主页 试试这个:
在src / guard / auth.guard.ts中创建警卫
import { Injectable } from '@angular/core';
import { CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot, Router } from '@angular/router';
import { Observable } from 'rxjs';
@Injectable({
providedIn: 'root'
})
export class AuthGuard implements CanActivate {
constructor(
private router:Router,
){}
canActivate(
next: ActivatedRouteSnapshot,
state: RouterStateSnapshot): Observable<boolean> | Promise<boolean> | boolean {
if(localStorage.getItem('user_id') != undefined || null){
return true;
}else{
this.router.navigate(['/login']);
return false;
}
}
}
app.component.ts
import { Component } from '@angular/core';
import { Platform } from '@ionic/angular';
import { SplashScreen } from '@ionic-native/splash-screen/ngx';
import { StatusBar } from '@ionic-native/status-bar/ngx';
@Component({
selector: 'app-root',
templateUrl: 'app.component.html'
})
export class AppComponent {
constructor(
private platform: Platform,
private splashScreen: SplashScreen,
private statusBar: StatusBar
) {
this.initializeApp();
}
initializeApp() {
this.platform.ready().then(() => {
this.statusBar.styleDefault();
});
if (localStorage.getItem("user_id") != undefined || null) {
this.router.navigate(['/home']);
} else {
this.router.navigate(['/login'])
}
}
}
app-routing.module.ts
import { NgModule } from '@angular/core';
import { PreloadAllModules, RouterModule, Routes } from '@angular/router';
import {AuthGuard} from './guard/auth.guard'; //add this
const routes: Routes = [
{
path: '',
redirectTo: 'login',
pathMatch: 'full'
},
{
path: 'home',
loadChildren: './home/home.module#HomePageModule',canActivate:[AuthGuard] //Use canActive:[AuthGuard] to protect routing if user is not logged in.
},
{ path: 'login', loadChildren: './login/login.module#LoginPageModule' },
{ path: 'my-profile', loadChildren: './my-profile/my-profile.module#MyProfilePageModule'},
{ path: 'appointments', loadChildren: './appointments/appointments.module#AppointmentsPageModule' },
{ path: 'request-acceptance', loadChildren: './request-acceptance/request-acceptance.module#RequestAcceptancePageModule' },
];
@NgModule({
imports: [
RouterModule.forRoot(routes, { preloadingStrategy: PreloadAllModules })
],
exports: [RouterModule]
})
export class AppRoutingModule { }
app.module.ts
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RouteReuseStrategy } from '@angular/router';
import { IonicModule, IonicRouteStrategy } from '@ionic/angular';
import { SplashScreen } from '@ionic-native/splash-screen/ngx';
import { StatusBar } from '@ionic-native/status-bar/ngx';
import { AppComponent } from './app.component';
import { AppRoutingModule } from './app-routing.module';
import { HttpClientModule } from '@angular/common/http';
import { HttpModule } from '@angular/http';
import {AuthGuard} from './guard/auth.guard'; //add this
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
@NgModule({
declarations: [AppComponent],
entryComponents: [],
imports: [
BrowserModule,
IonicModule.forRoot(),
AppRoutingModule,
HttpModule,
HttpClientModule,
FormsModule,
ReactiveFormsModule ,
],
providers: [
StatusBar,
SplashScreen,
AuthGuard, //add this
{ provide: RouteReuseStrategy, useClass: IonicRouteStrategy }
],
bootstrap: [AppComponent]
})
export class AppModule {}
答案 1 :(得分:0)
将“登录组件”设置为默认页面。在登录组件中
ngOninit(){
if(localStorage.getItem('user_id') != undefined || null){
//Redirect to Homepage
}
else{
//do nothing
}
}
当您加载首页(即登录页面)时。当我们在登录页面的Oninit中编写条件时,它将检查您的登录ID是否存储在本地存储中。如果是,它将自动重定向到您的主页;如果不是,则它将保留在同一页面中。