ionic3模拟token，实现登录拦截
1、在http服务里面管理token相关信息
注意：要在每个请求中添加token信息（和后台）public post(url: string, params: any = null, successCallback, errorCallback): any {
// 此处使用的post模式为非严格模式，如果要使用严格模式，请把参数放在第二个位置 覆盖null
return this.http.post(url, null, {
params: params,
headers: this.getHeaders(), // 添加token信息
}).subscribe((res: any) => {
this.responseSuccess(res, function (msg) {
if (successCallback) {
successCallback(res, msg);
}
});
}, err => {
if (errorCallback) {
errorCallback(err);
}
});
}
// get数据
public get(url: string, params?: any): any {
const token = this.getToken();
return this.http.get(url, {
headers: this.getHeaders(), // 添加token信息
params: params
});
}
// 删除相关请求
public delete(url: string, params?: any): any {
return this.http.delete(url, {
headers: this.getHeaders(), // 添加token信息
params: params
});
}完整代码：
import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { HttpHeaders } from '@angular/common/http';
/*
Generated class for the HttpSerProvider provider.
See https://angular.io/guide/dependency-injection for more info on providers
and Angular DI.
*/
@Injectable()
export class HttpSerProvider {
constructor(public http: HttpClient) {
console.log('Hello HttpSerProvider Provider');
}
public post(url: string, params: any = null, successCallback, errorCallback): any {
// 此处使用的post模式为非严格模式，如果要使用严格模式，请把参数放在第二个位置 覆盖null
return this.http.post(url, null, {
params: params,
headers: this.getHeaders(), // 添加token信息
}).subscribe((res: any) => {
this.responseSuccess(res, function (msg) {
if (successCallback) {
successCallback(res, msg);
}
});
}, err => {
if (errorCallback) {
errorCallback(err);
}
});
}
// get数据
public get(url: string, params?: any): any {
const token = this.getToken();
return this.http.get(url, {
headers: this.getHeaders(), // 添加token信息
params: params
});
}
// 删除相关请求
public delete(url: string, params?: any): any {
return this.http.delete(url, {
headers: this.getHeaders(), // 添加token信息
params: params
});
}
/**
* 头部信息获取，主要用于处理token
*/
private getHeaders() {
const token = this.getToken();
console.log(token)
return token ? new HttpHeaders({'token': token}) : null;
}
/**
* 处理响应的事件
* @param res
* @param {Function} error
*/
private responseSuccess(res: any, callback) {
if (res.code !== '0') { // 失败
if (res.msg) {
callback({code: res.code, msg: res.msg});
} else {
const data = res.data;
let errorMsg = '操作失败！';
data.map(i => {
errorMsg = i.errorMsg + '\n';
});
callback({code: res.code, msg: errorMsg});
}
} else {
callback(res);
}
}
/**
* 处理请求失败事件
* @param url
* @param err
*/
private requestFailed(url: string, err) {
let msg = '请求发生异常';
const status = err.status;
if (status === 0) {
msg = '请求失败，请求响应出错';
} else if (status === 404) {
msg = '请求失败，未找到请求地址';
} else if (status === 500) {
msg = '请求失败，服务器出错，请稍后再试';
} else {
msg = '未知错误，请检查网络';
}
return msg;
}
/**
* 使用本地缓存的方式来获取token信息
*/
getToken() {
return window.localStorage.getItem('app-video-ai-token');
}
/**
* 将token信息保存到本地缓存中 用缓存的形式实现token验证
* @param token
*/
setToken(token) {
// 目前只解析token字段，缓存先只存该字段
// + token.name + token.email + token.avatar + token.id + token.time
// JSON.stringify(token)
window.localStorage.setItem('app-video-ai-token',
token.token);
}
/**
* 清理token
*/
clearToken() {
window.localStorage.setItem('app-video-ai-token', null);
}
// 监听初次加载事件入口
load() {
if (this.getToken()) {
// 验证token信息，验证通过继续处于登录状态
} else {
// 正常去登录页面
}
}
}2、编写http拦截器服务（参考ng-alain）
1)在app.component.ts修改默认界面为首页
import { Component, ViewChild } from '@angular/core';
import { Platform } from 'ionic-angular';
import { StatusBar } from '@ionic-native/status-bar';
import { SplashScreen } from '@ionic-native/splash-screen';
import { ContentPage } from '../pages/content/content';
@Component({
templateUrl: 'app.html'
})
export class MyApp {
rootPage: any = ContentPage; // 默认模块
constructor(public platform: Platform, public statusBar: StatusBar, public splashScreen: SplashScreen) {
this.initializeApp();
}
initializeApp() {
this.platform.ready().then(() => {
// Okay, so the platform is ready and our plugins are available.
// Here you can do any higher level native things you might need.
this.statusBar.styleDefault();
this.splashScreen.hide();
});
}
}
2）http拦截器相关
import { Injectable, Injector } from '@angular/core';
import {
HttpInterceptor,
HttpRequest,
HttpHandler,
HttpErrorResponse,
HttpSentEvent,
HttpHeaderResponse,
HttpProgressEvent,
HttpResponse,
HttpUserEvent,
} from '@angular/common/http';
import { Observable } from 'rxjs/Observable';
import { of } from 'rxjs/observable/of';
import { mergeMap, catchError } from 'rxjs/operators';
import { ToastController } from 'ionic-angular';
import { NavController, AlertController, App } from 'ionic-angular';
import { LoginPage } from '../../pages/login/login';
/**
* 默认HTTP拦截器，其注册细节见 `app.module.ts`
*/
@Injectable()
export class DefaultInterceptor implements HttpInterceptor {
constructor(private injector: Injector,
public appCtrl : App,
private toastCtrl: ToastController) {}
alertMsg(message: string) {
const toast = this.toastCtrl.create({
message: message,
cssClass: 'toast-message', // 目前没用 添加的位置不是想要的
position: 'top', // “top”，“middle”，“bottom”。
duration: 3000
});
toast.present();
}
private goTo() {
// 退出到登录页面
this.getNavCtrl();
setTimeout(() => this.navCtrl.push(LoginPage));
}
navCtrl: NavController;
private getNavCtrl() {
this.navCtrl = this.appCtrl.getActiveNav();
}
private handleData(
event: HttpResponse | HttpErrorResponse,
): Observable {
// 业务处理：一些通用操作
switch (event.status) {
case 200:
break;
case 400: // Bad Request
this.alertMsg(event['error'].msg);
this.goTo();
break;
case 401: // 未登录状态码
this.goTo();
break;
case 403:
case 404:
case 500:
if (event['error'].msg) {
this.alertMsg(event['error'].msg);
}
// this.goTo(`/${event.status}`);
break;
default:
if (event instanceof HttpErrorResponse) {
console.warn(
'未可知错误，大部分是由于后端不支持CORS或无效配置引起',
event,
);
this.alertMsg(event.message);
this.goTo();
}
break;
}
return of(event);
}
intercept(
req: HttpRequest,
next: HttpHandler,
): Observable<
| HttpSentEvent
| HttpHeaderResponse
| HttpProgressEvent
| HttpResponse
| HttpUserEvent
> {
// 统一加上服务端前缀
const url = req.url;
// if (!url.startsWith('https://') && !url.startsWith('http://')) {
// url = `./` + url;
// }
const newReq = req.clone({
url: url,
});
return next.handle(newReq).pipe(
mergeMap((event: any) => {
// 允许统一对请求错误处理，这是因为一个请求若是业务上错误的情况下其HTTP请求的状态是200的情况下需要
if (event instanceof HttpResponse && event.status === 200)
return this.handleData(event);
// 若一切都正常，则后续操作
return of(event);
}),
catchError((err: HttpErrorResponse) => this.handleData(err)),
);
}
} 注意：直接在constructor中配置NavController会报错
解决办法：
navCtrl: NavController;
private getNavCtrl() {
this.navCtrl = this.appCtrl.getActiveNav();
}3）在app.moduel中处理拦截器相关
import { BrowserModule } from '@angular/platform-browser';
import { ErrorHandler, NgModule } from '@angular/core';
import { IonicApp, IonicErrorHandler, IonicModule } from 'ionic-angular';
import { MyApp } from './app.component';
import { ContentPage } from '../pages/content/content';
import { HomePage } from '../pages/home/home';
import { EventInfoModal } from '../pages/home/eventInfoModal';
import { LoginPage } from '../pages/login/login';
import { ListPage } from '../pages/list/list';
import { StatusBar } from '@ionic-native/status-bar';
import { SplashScreen } from '@ionic-native/splash-screen';
import { NgChartModule } from 'chartjs-ng2';
import {VgCoreModule} from 'videogular2/core';
import {VgControlsModule} from 'videogular2/controls';
import {VgOverlayPlayModule} from 'videogular2/overlay-play';
import {VgBufferingModule} from 'videogular2/buffering';
// http 服务请求
import { HttpClientModule, HTTP_INTERCEPTORS } from '@angular/common/http';
import { HttpSerProvider } from '../providers/http-ser/http-ser';
import { DefaultInterceptor } from '../providers/net/default.interceptor';
export function StartupServiceFactory(
startupService: HttpSerProvider,
): Function {
return () => startupService.load();
}
@NgModule({
declarations: [
MyApp,
HomePage,
EventInfoModal,
LoginPage,
ContentPage,
ListPage
],
imports: [
BrowserModule,
VgCoreModule,
VgControlsModule,
VgOverlayPlayModule,
VgBufferingModule,
IonicModule.forRoot(MyApp),
NgChartModule,
HttpClientModule,
],
bootstrap: [IonicApp],
entryComponents: [
MyApp,
HomePage,
EventInfoModal,
LoginPage,
ContentPage,
ListPage
],
providers: [
StatusBar,
SplashScreen,
{
provide: ErrorHandler,
useFactory: StartupServiceFactory,
useClass: IonicErrorHandler
},
{ provide: HTTP_INTERCEPTORS, useClass: DefaultInterceptor, multi: true },
HttpSerProvider,
HttpClientModule,
]
})
export class AppModule {}3、在登录、退出登录处理相关逻辑
1）登录模块处理登录成功后设置token
me.http.post('/upms/login',userinfo, function(res, msg){
if (res.code === '0') {
me.http.setToken({
token: res.token,
name: username.value,
email: res.user.email,
avatar: res.user.avatar,
id: res.user.userId,
time: +new Date()
});
me.navCtrl.push(ContentPage, userinfo);
} else {
me.alertMsg(res.msg);
}
}, function(msg){
me.alertMsg(msg);
});2）退出登录处理清理缓存，并跳转到登录页面
/**
* 退出登录
*/
logOut() {
this.http.clearToken();
this.navCrt.push(LoginPage);
// let modal = this.modalCtrl.create(LoginPage);
// modal.present();
}