在Angular中,检查用户是否登录并且会话是否丢失可以使用AuthGuard守卫。
首先,在app.module.ts中导入需要使用的模块和服务:
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { HttpClientModule } from '@angular/common/http';
import { FormsModule } from '@angular/forms';
import { AuthService } from './services/auth.service';
import { AuthGuard } from './guards/auth.guard';
import { AppComponent } from './app.component';
import { LoginComponent } from './components/login/login.component';
import { HomeComponent } from './components/home/home.component';
const appRoutes: Routes = [
{ path: '', component: HomeComponent, canActivate: [AuthGuard] },
{ path: 'login', component: LoginComponent },
{ path: '**', redirectTo: '' }
];
@NgModule({
declarations: [
AppComponent,
LoginComponent,
HomeComponent
],
imports: [
BrowserModule,
HttpClientModule,
FormsModule,
RouterModule.forRoot(appRoutes)
],
providers: [AuthService, AuthGuard],
bootstrap: [AppComponent]
})
export class AppModule { }
上述代码中,我们定义了路由,并使用了AuthGuard守卫来保护需要登录访问的页面。AuthGuard类实现了CanActivate接口,用于检查用户是否已经登录,如果没有登录,则重定向到登录页面。
import { Injectable } from '@angular/core';
import { CanActivate, Router } from '@angular/router';
import { AuthService } from '../services/auth.service';
@Injectable()
export class AuthGuard implements CanActivate {
constructor(private authService: AuthService, private router: Router) { }
canActivate() {
if (this.authService.isLoggedIn()) {
return true;
}
this.router.navigate(['/login']);
return false;
}
}
最后,在AuthService服务中实现isLoggedIn方法来检查用户是否已经登录:
import { Injectable } from '@angular/core';
@Injectable()
export class AuthService {
isLoggedIn(): boolean {
// Check if user is logged in
if (localStorage.getItem('currentUser')) {
return true;
}
return false;
}
}
在这个例子中,我们使用localStorage存储当前用户的信息,如果localStorage中包含了currentUser键,则表示用户已经登录。
以上就是Angular中检查用户是否登录和丢失会话的解决方法。