Angular Route Guard - некорректное перенаправление на страницу входа

Я использую охрану активации и сервер Node с JWT. Маршрутизация при нормальной работе работает хорошо. Однако, когда срок действия токена истек, а страница все еще существует в браузере, я могу щелкнуть в приложении angular, хотя данных API не существует. Я просмотрел свою настройку несколько раз, и она выглядит правильно, но по какой-то причине она не перенаправляет для входа в систему, когда токен не существует или истек.

----- АВТОМОБИЛЬНАЯ СЛУЖБА

import { Injectable } from "@angular/core";
import { CanActivate } from "@angular/router";
import { AuthService } from "../auth/auth.service";
import { UserService } from "../user.service";

@Injectable({ providedIn: "root" })
export class AuthGuardService implements CanActivate {
  constructor(public userService: UserService, public auth: AuthService) {}

  canActivate(): boolean {
    if (!this.auth.isAuthenticated()) {
      this.userService.logout();
      return false;
    }
    return true;
  }
}

----- АВТОМАТИЧЕСКОЕ ОБСЛУЖИВАНИЕ

import { Injectable } from "@angular/core";
import * as jwt_decode from "jwt-decode";
import { UserService } from "../user.service";
import { Router } from "@angular/router";

@Injectable({ providedIn: "root" })
export class AuthService {
  constructor(public userService: UserService, private _router: Router) {}

  ///// Method to check if user is authenticated (normal employees / non-admin)
  public isAuthenticated(): boolean {
    // Get token from localstorage
    const token = localStorage.getItem("token");

    // Check to see if token exists, if not return false
    if (!token) {
      return false;
    }

    // Decode token and get expiration date
    const decoded = jwt_decode(token);
    const date = decoded.exp;

    // check if expiration is less than current time, if so return true
    if (date < Date.now()) {
      this.userService.setCurrentUser(decoded);
      return true;
    } else {
      return false;
    }
  }
}

----- ОСНОВНОЙ МАРШРУТ

{
    path: "projects",
    component: ProjectsComponent,
    canActivate: [AuthGuardService]
  },

----- СПОСОБ ВЫХОДА ИЗ СЛУЖБЫ ПОЛЬЗОВАТЕЛЯ

 // Logout (used in navbar and by auth service)
  logout() {
    localStorage.removeItem(this.TOKEN_KEY);
    this.removeCurrentUser();
    this._router.navigate(["login"]);
  }

Все кажется правильным. Пользователь получает токен из API, переходит в локальное хранилище. На каждом маршруте читается токен и проверяется дата, если еще не истек срок действия, возвращается истина, маршрут хороший. Если срок действия токена истек, я вызываю службу пользователя и метод выхода из системы. Этот метод уничтожает токен, удаляет свойство currentUser и переводит пользователя на страницу входа. Это перенаправление страницы входа не происходит.

Если я вернусь на страницу по прошествии времени и срок действия токена истечет, я не смогу перемещаться между страницами angular, но по какой-то причине я

Любая помощь приветствуется, спасибо!


person mike varela    schedule 17.01.2020    source источник
comment
Попробуйте добавить / перед входом в систему: this._router.navigate(["/login"]);   -  person ferhado    schedule 17.01.2020
comment
Я подозреваю, что токен не очищен от localStorage должным образом. После выхода из системы в AuthService вставьте debugger или console.log внутрь if (!token) и убедитесь, что он отключился. Кроме того, в AuthGuardService поместите console.log или debugger в if(!this.auth.isAuthenticated()) и убедитесь, что он также срабатывает, когда вы не вошли в систему и не перемещаетесь по страницам.   -  person AliF50    schedule 17.01.2020


Ответы (1)


Использование CanActivate с возвратом true позволяет пользователю перейти по маршрутизированному пути, возвращение ложной навигации отменяется. Просмотрите эту ссылку

Интерфейс, который класс может реализовать для защиты, решающей, можно ли активировать маршрут. Если все охранники вернут истину, навигация продолжится. Если какой-либо охранник вернет false, навигация будет отменена. Если какой-либо охранник возвращает UrlTree, текущая навигация будет отменена, а новая навигация будет запущена для UrlTree, возвращенного охранником.

Вы можете ожидать, что оттуда возьмет на себя функцию выхода из системы, но она может работать не так, как вы ожидаете. Ознакомьтесь с этой статьей о том, что делать: ссылка

Кроме того, проверьте свой код, ему может потребоваться '/', как указано в ваших комментариях.

this._router.navigate(["/login"]);


@Injectable({
  providedIn: 'root'
})
export class AuthGuard implements CanActivate {
constructor(private authService: AuthService, private router: Router) {}

canActivate(next: ActivatedRouteSnapshot, state: RouterStateSnapshot) {
  if (!this.authService.isLoggedIn) {
    // redirect to some view explaining what happened
    this.router.navigateByUrl('/notauthorized');
    return false;
    } else {
      return true;
    }
  }
}
person SoEzPz    schedule 17.01.2020
comment
Благодарю. Оба комментария действительно помогли. Сначала помог / login, но, что более важно, я начал вести журнал консоли, чтобы увидеть, куда идет маршрутизатор, и обнаружил, что он не касается части кода. Я переместил маршрут и уничтожил локальное хранилище в событие маршрутизатора, проверка подлинности находится только в обслуживании. - person mike varela; 19.01.2020