1

我是 Angular 4 拦截器的新手，我正在尝试在我的应用程序中实现它。我想要做的就是如果我有 404 错误，或者如果令牌过期，它会将我导航到登录页面。另外，我的问题是我将如何在 html 中显示我的数据？我已经在没有新的 http 拦截器的情况下注释掉了我之前的工作示例。谁能帮我显示我的数据并在发生错误时将我重定向到登录页面？我已经在下面发布了我的代码。谢谢。

新闻服务.ts

import { Injectable } from '@angular/core';
import { HttpClient, HttpHeaders, HttpRequest} from '@angular/common/http';
import {Observable} from 'rxjs/Observable';
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/do';
import 'rxjs/add/operator/catch';
import 'rxjs/add/observable/of';

@Injectable()
export class NewsService {
  newslist: any;

  constructor(private httpClient: HttpClient) {}

  private handleError(error: any): Promise<any> {
    console.error('An error occurred', error); // for demo purposes only
    return Promise.reject(error.message || error);
  }

 getAllNews() {

    // if(this.newslist != null) {
    //   return Observable.of(this.newslist);
    // } 

    // else {
      const authToken = localStorage.getItem('auth_token'); 
      const headers = new HttpHeaders() 
      .set('Content-Type', 'application/json') 
      .set('Authorization', `Bearer ${authToken}`);

    //   return this.httpClient
    //     .get('http://sample.com/news/', 
    //       { headers: headers })
    //     .map((response => response))
    //     .do(newslist => this.newslist = newslist)
    //     .catch(e => {
    //         if (e.status === 401) {
    //             return Observable.throw('Unauthorized');

    //         }

    //     });
    // }

    const req = new HttpRequest('GET', 'http://sample.com/news/', {reportProgress: true,  headers: headers  } )
    return this.httpClient.request(req);
  }

  getNews(id: number) { 
    return this.getAllNews().map((data:any)=> data.data.data.find(news => news.id === id)) 
  }

}

新闻拦截器.ts

import { HttpInterceptor, HttpHandler, HttpRequest, HttpEvent } from '@angular/common/http';
import { Injectable } from '@angular/core';
import { Observable } from 'rxjs/Observable';
import { NewsService } from './news.service';


@Injectable()
export class NewsInterceptor implements HttpInterceptor {
    constructor(private newsService: NewsService){}
    intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>>{
        console.log("Intercepted!", req);
        const copiedReq = req.clone({headers: req.headers});
        return next.handle(req);
    }
}
4

0 回答 0