[英]How to auto logout of application when jwt access token expires using angular?
[英]How to logout when token expires in ionic3?
當用戶登錄時,第二天它將保留緩存並顯示已損壞的應用程序。 令牌過期后,我們如何將用戶重定向到登錄頁面? 我們將JWT與基於Angular 6的離子3一起使用。以下是代碼:
Token service (provider)
import { Injectable } from '@angular/core';
import { Storage } from '@ionic/storage';
@Injectable()
export class TokenProvider {
constructor(private storage: Storage) { }
SetToken(token) {
return this.storage.set('auth-token', token);
}
async GetToken() {
return await this.storage.get('auth-token');
}
DeleteToken() {
this.storage.remove('auth-token');
}
async GetPayload() {
const token = await this.storage.get('auth-token');
let payload;
if (token) {
payload = token.split('.')[1];
payload = JSON.parse(window.atob(payload));
}
return payload.data;
}
}
攔截器
import { switchMap } from 'rxjs/operators';
import { TokenProvider } from './token/token';
import { Observable } from 'rxjs/Observable';
import { fromPromise } from 'rxjs/observable/fromPromise';
import { Injectable } from '@angular/core';
import {
HttpInterceptor,
HttpRequest,
HttpHandler,
HttpEvent
} from '@angular/common/http';
@Injectable()
export class TokenInterceptor implements HttpInterceptor {
constructor(private tokenProvider: TokenProvider) {}
intercept(
req: HttpRequest<any>,
next: HttpHandler
): Observable<HttpEvent<any>> {
return fromPromise(this.tokenProvider.GetToken()).pipe(
switchMap(token => {
const headersConfig = {
'Content-Type': 'application/json',
Accept: 'application/json'
};
if (token) {
headersConfig['Authorization'] = `beader ${token}`;
}
const _req = req.clone({ setHeaders: headersConfig });
return next.handle(_req);
})
);
}
}
應用程序組件:
this.storage.get('auth-token').then(token => {
if (token) {
this.tokenProvider.GetPayload().then(data => {
const params = {
room: 'global',
user: data.username
};
this.socket.emit('online', params);
});
this.nav.setRoot('TabsPage');
} else {
this.nav.setRoot('LoginPage');
}
});
});
}
但似乎仍然無法正常工作。 當令牌過期時,它仍然保持頁面處於活動狀態,而沒有任何數據看起來像是被破壞的應用程序。 我們如何解決此問題並將用戶重定向到“登錄”頁面?
兩種處理令牌過期的方法,
import { switchMap } from 'rxjs/operators';
import { TokenProvider } from './token/token';
import { Observable } from 'rxjs/Observable';
import { fromPromise } from 'rxjs/observable/fromPromise';
import { Injectable } from '@angular/core';
import {
HttpInterceptor,
HttpRequest,
HttpHandler,
HttpEvent
} from '@angular/common/http';
@Injectable()
export class TokenInterceptor implements HttpInterceptor {
constructor(private tokenProvider: TokenProvider) {}
intercept(
req: HttpRequest<any>,
next: HttpHandler
): Observable<HttpEvent<any>> {
return fromPromise(this.tokenProvider.GetToken()).pipe(
switchMap(token => {
const headersConfig = {
'Content-Type': 'application/json',
Accept: 'application/json'
};
if (token) {
headersConfig['Authorization'] = `beader ${token}`;
}
const _req = req.clone({ setHeaders: headersConfig });
return next.handle(_req).do((event: HttpEvent<any>) => {
if (event instanceof HttpResponse) {
// do stuff with response if you want
}
}, (err: any) => {
if (err instanceof HttpErrorResponse) {
if (err.status === 401) {
// redirect to the login route
// or show a modal
}
}
});
})
);
}
}
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;
}
}
在這種情況下使用事件 。 當登錄請求由於令牌過期或憑證無效而出錯時發布事件,並在app.component.ts上進行訂閱,您可以在其中將登錄頁面設置為根頁面。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.