Android 401在ionic 3应用程序中,从本地存储接收令牌到拦截器

Android 401在ionic 3应用程序中,从本地存储接收令牌到拦截器,android,angular,ionic-framework,local-storage,angular-http-interceptors,Android,Angular,Ionic Framework,Local Storage,Angular Http Interceptors,我的问题是,如果我切换到ionic应用程序中的某个页面,每次都会有第一个呼叫。如果我重新加载页面,所有内容都将按aspected方式工作 这是我的http拦截器: import { Injectable } from '@angular/core'; import { HttpEvent, HttpInterceptor, HttpHandler, HttpRequest } from '@angular/common/http'; import { Observable } from 'rxj

我的问题是,如果我切换到ionic应用程序中的某个页面,每次都会有第一个呼叫。如果我重新加载页面,所有内容都将按aspected方式工作

这是我的http拦截器:

import { Injectable } from '@angular/core';
import { HttpEvent, HttpInterceptor, HttpHandler, HttpRequest } from '@angular/common/http';
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/observable/throw';
import 'rxjs/add/operator/catch';
import { Storage } from '@ionic/storage';

@Injectable()
export class MyAppHttpInterceptor implements HttpInterceptor {
  token: string;
  constructor(public storage: Storage) {
    storage.get('token').then((val) => {
      this.token = val;
    })
  }

  intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    req = req.clone({
      headers: req.headers.set('Authorization',
        `Bearer ${this.token}`)
    });
    return next.handle(req)
      .catch((error) => {
        return Observable.throw(error);
      }) as any;
  }
}
从'@angular/core'导入{Injectable};
从'@angular/common/http'导入{HttpEvent,HttpInterceptor,HttpHandler,HttpRequest};
从“rxjs/Observable”导入{Observable};
导入“rxjs/add/observable/throw”;
导入“rxjs/add/operator/catch”;
从'@ionic/Storage'导入{Storage};
@可注射()
导出类MyAppHttpInterceptor实现HttpInterceptor{
令牌:字符串;
构造函数(公共存储:存储){
storage.get('token')。然后((val)=>{
this.token=val;
})
}
截取(req:HttpRequest,next:HttpHandler):可观察{
req=req.clone({
headers:req.headers.set('授权',
`承载${this.token}`)
});
返回下一个句柄(req)
.catch((错误)=>{
返回可观察抛出(错误);
})如有的话;
}
}
看来存储速度太慢了。它是???还是我的错^^ 我在所有系统上都有这个问题:浏览器(本地存储)和Android


我使用jwt从我的node express api中获取令牌。当然,它不一定很慢,但是存储速度很慢。get()是一个异步调用,因此在执行http调用时,很可能您的令牌变量仍然未定义。您可以使用断点或console.log(this.token)轻松验证它

因此,我建议您创建一个共享的'provider'(用离子术语)来存储令牌(您可以将所有全局变量添加到令牌中),然后将提供者注入拦截器,只需使用值:)


当然,如果我从应用程序向api发出请求,您可以从storge(像现在一样)返回一个承诺,然后在内部执行一个函数,使用您(@slashpm&@Cristian)的想法拦截组合booth。这就是最后的解决办法。Thhhaaannnkkkssss=)是的,听起来像是解决方案。我试了一下,发现很多thx=)