ionic3模拟token，实现登录拦截

逃离我推掉我的手 2022-05-16 23:13 253阅读 0赞

原文出处：[https://blog.csdn.net/ligaoming\_123/article/details/80914202][https_blog.csdn.net_ligaoming_123_article_details_80914202]  (建议阅读原文）

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<any> | HttpErrorResponse,
      ): Observable<any> {
        // 业务处理：一些通用操作
        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<any>,
        next: HttpHandler,
      ): Observable<
        | HttpSentEvent
        | HttpHeaderResponse
        | HttpProgressEvent
        | HttpResponse<any>
        | HttpUserEvent<any>
      > {
        // 统一加上服务端前缀
        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();
      }

[https_blog.csdn.net_ligaoming_123_article_details_80914202]: https://blog.csdn.net/ligaoming_123/article/details/80914202