注销后，用户可以使用返回按钮返回如何解决此问题答案

【问题标题】：After logging out ,the user is able to go back using back button how to resolve this issue注销后，用户可以使用返回按钮返回如何解决此问题
【发布时间】：2019-02-06 02:43:06
【问题描述】：

route.ts

const appRoutes: Routes = [
  {
    path: '',
    redirectTo: 'login',
    pathMatch: 'full'
  },
  {
    path: 'login',
    component: LoginComponent
  },
  {
    path: 'dashboard',
    canActivate: [AuthguardGuard],
    component: MyNavComponent
  },

  { 
  path: '**', 
  redirectTo: 'login', 
  pathMatch: 'full' 
  }

];

Authguard.guard.ts

import { Injectable } from '@angular/core';
import { CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot } from '@angular/router';
import { Observable } from 'rxjs';
import { UserService } from './user.service';

@Injectable({
  providedIn: 'root'
})
export class AuthguardGuard implements CanActivate {
  constructor(private user: UserService) { }
  canActivate(
    next: ActivatedRouteSnapshot,
    state: RouterStateSnapshot): Observable<boolean> | Promise<boolean> | boolean {
    return this.user.getUserLoggedIn();
  }
}

用户.service.ts

import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root'
})
export class UserService {
  private isUserLoggedIn;
  private username;

  constructor() {
    this.isUserLoggedIn = false;
  }

  setUserLoggedIn() {
    this.isUserLoggedIn = true;
  }

  getUserLoggedIn() {
    return this.isUserLoggedIn;
  }
}

import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';
import { UserService } from '../user.service';
import { FormControl, Validators } from "@angular/forms";


@Component({
  selector: 'app-login',
  templateUrl: './login.component.html',
  styleUrls: ['./login.component.css']
})
export class LoginComponent implements OnInit {
  flag = true;
  mobileFormControl = new FormControl("", [
    Validators.required,

  ]);

  constructor(private router: Router, private user: UserService) { }

  ngOnInit() {
  }

  loginUser(e) {
    e.preventDefault();
    console.log(e);
    var username = e.target.elements[0].value;
    var password = e.target.elements[1].value;

    if (username == 'admin' && password == 'admin') {
      this.user.setUserLoggedIn();
      this.router.navigate(['dashboard']);
      this.flag = true;
    }
    else {
      this.flag = false;
      this.router.navigate(['login']);
    }
  }

}

注销.ts

logout() {
    var r = confirm("Are you sure you want to Logout!");
    if (r == true) {
      this.router.navigate(['']);
    }
  }

单击注销后，我仍然可以使用浏览器的后退按钮移至仪表板组件，如何解决此问题，请帮助我。我不希望用户在不再次登录的情况下移动到仪表板组件。表示一旦注销，用户需要再次登录才能进入仪表板组件。

【问题讨论】：

标签： angular login routing logout guard

【解决方案1】：

如果你想以更简单的方式完成它，那么只需创建一个全局变量，例如LoggedInStatus，当用户登录时，将此全局变量设置为true。现在，在所有其他页面中，在 ngOnInit() 中保留代码

ngOnInit(){
    if(!this.global.LoggedInStatus){
        this.router.navigate(['../login']) 
      }

当用户调用 logout() 时，只需将 LoggedInStatus 重新分配给 false。

这将限制用户在没有实际登录的情况下导航到任何页面。

现在，如果您希望它更安全，那么当您调用登录 API 时，传递一个 sessionID 或令牌并将其存储在全局范围内。在每个页面中检查 SessionID 进行验证，否则重定向到登录页面。

【讨论】：

我会实现这个

【解决方案2】：

您可以通过创建令牌/会话来处理此问题。

每次登录时，创建一个令牌并在整个应用程序中使用它。
如果您导航到不同的页面，您将保持相同的令牌。
在任何时间点，如果您在应用程序的任何页面上按下注销按钮，则销毁令牌。

通过这样做，我可以限制用户在注销后返回上一页。

【讨论】：