Блог

У меня есть код, который сохранит действительный токен из API со сроком службы в хранилище сеансов, поэтому, пока у пользователя не появится действительный токен, система продолжит работать. Если у пользователя нет токена, то с помощью auth guard пользователь будет перенаправлен на страницу входа в систему. Для такого типа конфигурации мне нужен способ, при котором, если пользователь копирует URL-адрес со страницы входа в систему и переходит на новую, то также пользователь должен быть в системе с действительным входом. Поскольку для хранения сеансов на новой вкладке не будут храниться данные сеанса, поэтому пользователь выйдет из системы. Следовательно, может ли кто-нибудь предложить способ удовлетворения этого требования?

—Код модуля приложения

 import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    AppRoutingModule,
  ],
  providers: [CommonService],
  bootstrap: [AppComponent,]
})
export class AppModule { }

 

—модуль маршрутизации приложений

 import { NgModule } from "@angular/core";
import { Routes, RouterModule } from "@angular/router";
import { MainLayoutComponent } from "./shared/layout/app-layouts/main-layout.component";
import { AuthLayoutComponent } from "./shared/layout/app-layouts/auth-layout.component";
import { AuthGuard } from "./core/guards/auth.guard";

const routes: Routes = [
    {
        path: "",
        component: MainLayoutComponent, canActivate: [AuthGuard],
        children: [
            {
                path: "",
                redirectTo: "dashboard/analytics",
                pathMatch: "full"
            },
            {
                path: "dashboard",
                loadChildren: "./features/dashboard/dashboard.module#DashboardModule",
            }            
        ]
    },

    {
        path: "auth",
        component: AuthLayoutComponent,
        loadChildren: "./features/auth/auth.module#AuthModule"
    },
    { path: "**", redirectTo: "miscellaneous/error404" }
];

@NgModule({
    imports: [RouterModule.forRoot(routes, { useHash: true })],
    exports: [RouterModule]
})
export class AppRoutingModule { }
 

—Код защиты от аутентификации

 import { Injectable } from '@angular/core';
import { CanActivate, Router } from '@angular/router';
@Injectable()
export class AuthGuard implements CanActivate {
    constructor(private router: Router) {}
    canActivate(){
        if (sessionStorage.getItem('auth_token')) {
            return true;
        }        
        this.router.navigate(['/auth/login']);
        return false;
    }
}

 

—Сервисный код, который сохраняет токен от вызова API

 login(model: any): Observable<any> {
        let headers = new HttpHeaders({ 'Content-Type': 'application/json' });
        return this.http.post(API URL, model, { headers: headers }).pipe(
            map((res: any) => {
                var obj = jwt_decode(res.responseObject);
                sessionStorage.setItem('auth_token', obj);
                return true;
            }), catchError((res: any) => {
                return Observable.throw(res.error.error);
            })
        );
    }
 

—Модель для передачи API с действительными учетными данными

 export class LoginModel {
    constructor(
        public username: string,
        public password: string
    ) { }
}