Решения о маршрутизации на основе истечения срока действия токена
Если вы используете JSON веб-токены (JWT) для защиты своего приложения Angular (и я рекомендую это сделать), Один из способов принять решение о том, следует ли обращаться к маршруту, - проверить время истечения токена. Вероятно, вы используете JWT, чтобы позволить вашим пользователям получать доступ к защищенным ресурсам на вашем бэкэнде. В этом случае токен не будет полезен, если срок его действия истек, поэтому это хороший признак того, что пользователя следует считать «не прошедшим проверку подлинности».
Создайте метод в службе проверки подлинности, который проверяет действительно ли пользователь аутентифицирован. Опять же, для целей аутентификации без сохранения состояния с помощью JWT это просто вопрос истечения срока действия токена. Для этого можно использовать класс JwtHelperService из angular2-jwt .
// src/app/auth/auth.service.ts
import { Injectable } from '@angular/core';
import { JwtHelperService } from '@auth0/angular-jwt';
@Injectable()
export class AuthService {
constructor(public jwtHelper: JwtHelperService) {}
// ...
public isAuthenticated(): boolean {
const token = localStorage.getItem('token');
// Check whether the token is expired and return
// true or false
return !this.jwtHelper.isTokenExpired(token);
}
}
Примечание. В этом примере предполагается, что вы хранение JWT пользователя в локальном хранилище.
Создайте новый сервис, который реализует защиту маршрута. Вы можете называть его как угодно, но обычно достаточно что-то вроде auth-guard.service.
// src/app/auth/auth-guard.service.ts
import { Injectable } from '@angular/core';
import { Router, CanActivate } from '@angular/router';
import { AuthService } from './auth.service';
@Injectable()
export class AuthGuardService implements CanActivate {
constructor(public auth: AuthService, public router: Router) {}
canActivate(): boolean {
if (!this.auth.isAuthenticated()) {
this.router.navigate(['login']);
return false;
}
return true;
}
}
Служба внедряет AuthService и Router и имеет один метод с именем canActivate . Этот метод необходим для правильной реализации интерфейса CanActivate .
Метод canActivate возвращает логическое значение, указывающее, следует ли разрешить навигацию по маршруту. Если пользователь не аутентифицирован, он перенаправляется в другое место, в этом случае маршрут называется / login. Теперь защита может быть применена к любым маршрутам, которые вы хотите защитить.
// src/app/app.routes.ts
import { Routes, CanActivate } from '@angular/router';
import { ProfileComponent } from './profile/profile.component';
import {
AuthGuardService as AuthGuard
} from './auth/auth-guard.service';
export const ROUTES: Routes = [
{ path: '', component: HomeComponent },
{
path: 'profile',
component: ProfileComponent,
canActivate: [AuthGuard]
},
{ path: '**', redirectTo: '' }
];
У маршрута / profile теперь есть дополнительное значение конфигурации: canActivate. AuthGuard, созданный выше, передается в массив для canActivate, что означает, что он будет запускаться каждый раз, когда кто-то пытается получить доступ к маршруту / profile. Если пользователь аутентифицирован, он попадает в маршрут. Если нет, они перенаправляются на маршрут / login.
Примечание: canActivate guard все еще позволяет компоненту для данного маршрута быть активированным (но не перемещенным к нему). Если бы мы вообще хотели предотвратить активацию, мы могли бы использовать защиту canLoad.
больше информации здесь