离子3 + HttpClientModule和来自存储的令牌

问题描述

我已经构建了一个拦截器，用于向PHP后端发出HTTP请求.该后端为应用程序提供了JWT令牌，我将其保存在Ionic Storage中.但是我想从存储中获取该令牌并将其作为标头添加到HTTP请求中.

I have build an interceptor for making HTTP requests to a PHP backend.This backend gives an JWT token to the app and I save this in the Ionic Storage.But I want to get that token from Storage and add it as an header to the HTTP request.

下面是我的带有硬编码令牌的拦截器.这行得通，我从后端得到响应.

Below is my interceptor with and hardcoded token.This works and I get a response from the backend.

查看最新动态@帖子底部

See update @ bottom of this post

http-interceptor.ts

http-interceptor.ts

import { HttpInterceptor, HttpRequest } from '@angular/common/http/';
import {HttpEvent, HttpHandler} from '@angular/common/http';
import { AuthProvider } from "../providers/auth/auth";
import {Injectable} from "@angular/core";
import {Observable} from "rxjs/Observable";
import {Storage} from "@ionic/storage";

@Injectable()
export class TokenInterceptor implements HttpInterceptor {

    intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
        const changedReq = req.clone({headers: req.headers.set('Authorization', 'Bearer MY TOKEN')});
        return next.handle(changedReq);
    }

}

但是如何将令牌从存储中获取到报头中.我进行了大量搜索，大多数教程/示例均来自较旧的HTTP模块.如果有人有想法或有up2date示例?

But how do I get the token from storage into the header.I searched alot and most of the tutorials / examples are from the older HTTP module. If someone has an idea or has a up2date example ?

更新

确定以下代码发送令牌

intercept(req: HttpRequest<any>, next: HttpHandler) : Observable<HttpEvent<any>>{
        return fromPromise(this.Auth.getToken())
            .switchMap(token => {
                const changedReq = req.clone({headers: req.headers.set('Authorization', 'Bearer ' + token )});

                return next.handle(changedReq);
            });
    }

有一个例外，即我第一次访问该页面:)

With 1 exception, namely the first time I access that page :)

推荐答案

您可以将JWT令牌保存在例如 localStorage

You can save JWT token in, for example, localStorage

 localStorage.setItem('myToken', res.token);

然后使用

localStorage.getItem('myToken');

在您的情况下，如下所示:

In your case something like this:

import { HttpInterceptor, HttpRequest } from '@angular/common/http/';
import {HttpEvent, HttpHandler} from '@angular/common/http';
import { AuthProvider } from "../providers/auth/auth";
import {Injectable} from "@angular/core";
import {Observable} from "rxjs/Observable";
import {Storage} from "@ionic/storage";

@Injectable()
export class TokenInterceptor implements HttpInterceptor {

    intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
        const changedReq = req.clone({headers: req.headers.set('Authorization', localStorage.getItem('myToken'))});
        return next.handle(changedReq);
    }

}

如果您要使用离子存储

import { HttpInterceptor, HttpRequest } from '@angular/common/http/';
    import {HttpEvent, HttpHandler} from '@angular/common/http';
    import { AuthProvider } from "../providers/auth/auth";
    import {Injectable} from "@angular/core";
    import {Observable} from "rxjs/Observable";
    import {Storage} from "@ionic/storage";

   @Injectable()
    export class TokenInterceptor implements HttpInterceptor {

    constructor(public _storage: Storage) {
         _storage.get('myToken').then((val) => {
         console.log('Your age is', val);
         });
    }

       intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
            const changedReq = req.clone({headers: req.headers.set('Authorization', this.val)});
            return next.handle(changedReq);
        }

    }

这篇关于离子3 + HttpClientModule和来自存储的令牌的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！