После выхода из системы пользователь может вернуться, используя кнопку «Назад», как решить эту проблему. - PullRequest
Новая
       18

После выхода из системы пользователь может вернуться, используя кнопку «Назад», как решить эту проблему.

0 голосов
/ 31 августа 2018

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

После нажатия на кнопку «Выход» я все еще могу перейти к компоненту панели мониторинга с помощью кнопки «Назад» в браузере. Как решить эту проблему, пожалуйста, помогите мне. Я не хочу, чтобы пользователь переходил на панель инструментов без повторной регистрации. означает, что после выхода из системы пользователю необходимо снова войти в систему, чтобы войти в компонент панели мониторинга.

Ответы [ 2 ]

0 голосов
/ 31 августа 2018

Если вы хотите выполнить это более простым способом, просто создайте глобальную переменную, например, LoggedInStatus, и, когда пользователь вошел в систему, задайте для этой глобальной переменной значение true. Теперь на всех других страницах в ngOnInit () сохраните код, подобный 

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

и пока пользователь вызывает logout (), просто переназначьте LoggedInStatus на false.

Это ограничит пользователей от перехода на любую страницу без фактического входа в систему.

Теперь, если вы хотите, чтобы он был более безопасным, тогда при вызове API входа в систему передайте sessionID или токен и сохраните его в глобальной области видимости. На каждой странице проверяйте SessionID для проверки, orelse перенаправляйте на страницу входа.

0 голосов
/ 31 августа 2018

Вы можете справиться с этим, создав токен / сессию.

  1. Каждый раз, когда вы входите в систему, создайте токен и используйте его во всем приложении.
  2. Если вы переходите на разные страницы, у вас будет один и тот же токен.
  3. В любой момент времени с любой страницы вашего приложения, если вы нажмете кнопку выхода из системы, а затем уничтожите токен.

Делая это, я могу ограничить переход пользователя на предыдущую страницу после выхода из системы.

...