Как перенаправить на выход, когда токен истек в angular 4 - PullRequest
Новая
       14

Как перенаправить на выход, когда токен истек в angular 4

0 голосов
/ 10 мая 2018

У меня есть 4 угловых приложения. Там я использую токен JWT для аутентификации. Все отлично работает но время истечения токена, которое я дал току JWT, составляет 1 час. я хочу выйти из приложения переднего плана, как только срок действия токена истекает на стороне сервера. в бэкэнде узла я использую экспресс-посредник, чтобы обработать это, проверив, все ли запросы содержат действительный токен. Есть ли способ сделать эту угловую сторону также?

Ответы [ 3 ]

0 голосов
/ 10 мая 2018

Вы можете использовать Http Interceptors. Если есть несанкционированный ответ 401. Предположим, вы отправляете http-запрос с токеном в заголовке. Ваш серверный код проверит ваш токен и, наконец, выяснит, что токен недействителен / истекает возврат кода 401, и вы можете перенаправить пользователя на страницу входа. и ручная передача токена и проверка всех авторизованных / неавторизованных http-запросов - это очень повторяющаяся работа, эту обычную задачу вы можете выполнять перехватчиками в качестве делегата для http-запроса. посмотрите примеры кода, которые вы получите.

AppHttpInterceptor.ts 

import { Injectable } from "@angular/core";
import {
    HttpInterceptor,
    HttpRequest,
    HttpResponse,
    HttpErrorResponse,
    HttpHandler,
    HttpEvent
} from '@angular/common/http';

import { Observable } from 'rxjs/Observable';
import 'rxjs/add/operator/do';
import 'rxjs/add/operator/catch';
import 'rxjs/add/observable/throw';
import { Http, Response, RequestOptions, Headers } from '@angular/http';
import { Router } from '@angular/router'


@Injectable()
export class AppHttpInterceptor implements HttpInterceptor {
    constructor(private router: Router){

    }
    headers = new Headers({
        'Content-Type': 'application/json',
        'Token': localStorage.getItem("Token")
    });
    intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {

        console.log("intercepted request ... ");

        // Clone the request to add the new header.
        const authReq = req.clone({ headers: req.headers.set("Token", localStorage.getItem("Token")) });

        console.log("Sending request with new header now ...");

        //send the newly created request
        return next.handle(authReq)
            .catch(err => {
                // onError
                console.log(err);
                if (err instanceof HttpErrorResponse) {
                    console.log(err.status);
                    console.log(err.statusText);
                    if (err.status === 401) {
                        window.location.href = "/login";
                    }
                }
                return Observable.throw(err);
            }) as any;
    }
}

app.module.ts 

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { HttpModule } from '@angular/http';
import { HttpClient } from "@angular/common/http";
import { FormsModule } from '@angular/forms';
import { ToasterModule, ToasterService } from "angular2-toaster";
import { BrowserAnimationsModule } from '@angular/platform-browser /animations';
import { RouterModule } from '@angular/router';
import { ReactiveFormsModule } from '@angular/forms';
import { HttpClientModule,HTTP_INTERCEPTORS} from '@angular/common/http';
import {AppHttpInterceptor} from './Common/AuthInterceptor';
import { AppRoutes } from '../app/Common/Routes';
import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent,
  ],
  imports: [
    BrowserModule, HttpModule,HttpClientModule, ReactiveFormsModule, FormsModule, BrowserAnimationsModule, RouterModule.forRoot(AppRoutes)
  ],
 providers: [
 {
   provide: HTTP_INTERCEPTORS,
   useClass: AppHttpInterceptor,
   multi: true
 }
],
bootstrap: [AppComponent]
})
export class AppModule { 
  constructor(private httpClient: HttpClient){
    this.httpClient.get("https://jsonplaceholder.typicode.com/users").subscribe(
  success => {
    console.log("Successfully Completed");
    console.log(success);
  }
  );
 }

}

0 голосов
/ 10 мая 2018

вы можете проверить, истек ли токен или нет, и в ответ вы можете перенаправить на страницу входа хранить токен в локальном хранилище например 

 yourmthod(parametr) {
        this.token = localStorage.getItem("token");
        this.headers = new Headers();
        this.headers.delete(this.token);
        this.headers.append("Authorization", this.token);
        return this._http.post(Constants.SERVER_URL + 'your method', {headers: this.headers});
    }

, поэтому он ответит 401 ошибка, и вы можете справиться с этим, перенаправив на страницу входа в систему

если любой запрос, вы можете задать вопрос в комментариях, чтобы я мог помочь вам

и вы также можете использовать if-else в вашем методе

и вы можете написать код в app.component.ts в onIt() метод 

ngOnInit(): void {
        let token = localStorage.getItem("token");
        if (token) {
            this.isTokenAvaialable = true;
            this.http.get(Constants.SERVER_URL + 'your mthod to validate token' + token).subscribe(data => {
                if (data == true) {
                    if (window.location.pathname == "") {
                        this.router.navigate(['/home', {outlets: {'r2': ['dashboard']}}]);
                    }
                } else if (data == false) {

                    this.logout('Server restarted.Please login again!!');
                } else {

                    this.logout('Session expired.Please login again.!!');
                }

            }, (err: HttpErrorResponse) => {
                this.toastr.warning('Server restarted.Please login again!!', 'Alert');
                localStorage.removeItem("token");
                this.isTokenAvaialable = false;
                this.logout('Server restarted.Please login again!!');
            });
        } else {
            this.isTokenAvaialable = false;
            this.router.navigate(['']);
            localStorage.removeItem("token");
            this.isTokenAvaialable = false;
        }
    }
0 голосов
/ 10 мая 2018

В angular2-jwt есть метод tokenNotExpired, который можно использовать для проверки истечения срока действия токена

Дайте попробовать это 

  authHttpGet(URL: string): Observable<any> {
    if (!tokenNotExpired('id_token')) {
      this._route.navigate(['login']);
    }
  }
...