![](/img/trans.png)
[英]How to disable users from accessing previous page by browser back button after logout in angular2?
[英]how to disable the back button after logout in angular 7
我有一個登錄頁面作為我的應用程序的一部分。 我想在成功注銷后禁用我的后退按鈕,以便用戶無法返回。
你不能禁用它,你只能阻止它。 只需檢查登錄狀態並將其重定向到特定頁面,如果它們被重定向到需要登錄的頁面
您可以添加一個警衛來觀察並決定用戶是否可以訪問該頁面,而不是禁用瀏覽器的事件。 CanActivate
是救世主
CanActivate ( 界面 )
類可以實現的接口,用於確定是否可以激活路由。 如果所有警衛都返回true,導航將繼續。 如果任何警衛返回false,導航將被取消。 來自Angular的官方文檔
這里我添加了一些我目前正在使用的代碼。 希望有助於理解如何實現一個。
import { CanActivate, ActivatedRouteSnapshot, Router, RouterStateSnapshot } from '@angular/router';
import { IdentityService } from './identity.service';
@Injectable()
export class LoginGuard implements CanActivate {
constructor(private identityService: IdentityService, private router: Router) { }
canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean {
if (this.identityService.isLoggedIn()) { // determine if the uder is logged in from this method.
return true;
}
this.router.navigate(['/login']);
return false;
}
}
添加此LoginGuard類為供應商在你app.module.ts
providers: [{ provide: LoginGuard, useClass: LoginGuard }]
然后在路線中添加canActive
以保護它。
{
path: 'dashboard',
component: DashboadComponent,
canActivate: [LoginGuard]
}
是的Auth gurad在這里很有用。
import { Injectable } from '@angular/core';
import { CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot } from '@angular/router';
import { Observable } from 'rxjs';
import { AuthService } from './auth-service.service';
@Injectable({
providedIn: 'root'
})
export class AuthGuard implements CanActivate {
constructor(private authService: AuthService) {
}
canActivate(
next: ActivatedRouteSnapshot,
state: RouterStateSnapshot): Observable<boolean> | Promise<boolean> | boolean {
return this.authService.getisLoggedIn();
}
}
在app.module.ts中添加auth guard
{ path: 'home', component: HomeComponent, canActivate: [AuthGuard] }
{ path: 'logout', component: LogoutComponent , canActivate:[AuthGuard]}
因此,注銷后我們可以禁用后退按鈕
添加auth guard作為app.module.ts提供程序的一部分:[AuthGuard]
您可以在下面嘗試,它對我有用。
https://www.npmjs.com/package/angular-disable-browser-back-button
import { NgModule } from '@angular/core';
import { BackButtonDisableModule } from 'angular-disable-browser-back-button';
@NgModule({
...
imports: [
...
BackButtonDisableModule.forRoot()
],
...
})
export class AppModule {}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.