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

Question

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();
  }
}

User.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;
  }
}

Login.component.ts

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']);
    }
  }

}

Logout.ts

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

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

Answer 1

您可以通过创建 token/sessions 来处理这个问题。

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

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

Answer 2

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

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

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

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

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

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

After logging out ,the user is able to go back using back button how to resolve this issue

angular

login

routing

logout

guard

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

After logging out ,the user is able to go back using back button how to resolve this issue

angular

login

routing

logout

guard

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