Angular Route Guard - неправильное перенаправление на страницу входа - PullRequest
Новая
       5

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

1 голос
/ 17 января 2020

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

---- - AUTH GUARD SERVICE 

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

----- AUTH SERVICE 

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

----- BASI C МАРШРУТ 

{
    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, заходит в локальное хранилище. На каждом маршруте считывается токен и проверяется дата, если срок действия еще не истек, возвращается значение true, маршрут исправен. Если срок действия токена истек, я вызываю службу пользователя и метод выхода из системы. Этот метод уничтожает токен, удаляет свойство currentUser и перемещает пользователя на страницу входа. Перенаправление страницы входа не происходит.

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

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

1 Ответ

1 голос
/ 18 января 2020

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

Интерфейс, который может реализовать класс, чтобы быть защитником, решающим, можно ли активировать маршрут. Если все охранники вернут истину, навигация продолжится. Если какой-либо охранник вернет 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;
    }
  }
}
...