web-dev-qa-db-ja.com

Angular2：APIがエラーを返した場合にリダイレクトする方法は？

私のサービスでは、許可されていない場合にユーザーがリダイレクトされるときの動作について説明したいと思います。

export class MessagesService {
    constructor (private http: Http) {}

    private _usersUrl = '/users.json';  // URL to web api


    getUsers() {
        return this.http.get(this._usersUrl)
            .map(res => <User[]> res.json().data)
            .catch(this.handleError);
    }

    private handleError (error: Response) {

        if (error.status == 401) {
            // How do I tell Angular to navigate LoginComponent from here?
        } else {
            return Observable.throw(error.json().error || 'Server error');
        }
    }
}

私の質問は次のとおりです。

  • それも可能ですか？
  • それは良い習慣ですか？
    • はいの場合、どうすればそれを実行できますか？
    • いいえの場合、他にどのようにそれを行うことができますか？
typescriptangularangular2-routingangular2-services
7
Viktor

私のアプローチは、独自のリクエストサービスを作成し、実際のリクエストをラップして401や403などを処理するインターセプター関数を使用することでした。

あなたがそれを見たいならば、それを以下に含めました。

import {Injectable} from "@angular/core"
import {Subscription, Observable} from "rxjs"
import {TokenModel} from "../../models/token.model"
import {TokenService} from "../authentication/token.service"
import {Http, Headers, URLSearchParams, RequestOptions, Request, RequestMethod} from "@angular/http"
import {Router} from "@angular/router"

@Injectable()
export class RequestService
{
    private baseUrl: string;
    private subscription: Subscription;
    private token: TokenModel;

    constructor(public tokenService: TokenService,
                public http: Http,
                public router: Router)
    {
        this.baseUrl = `${process.env.API_URL}/example`;
        this.subscription = this.tokenService.token$.subscribe(token => this.token = token);
    }

    get(path: string, params?: Object, withCredentials?: boolean): Observable<any>
    {
        this.checkAuthorised();

        const url: string = this.baseUrl + path;
        const headers: Headers = new Headers({
            'Accept': 'application/json'
        });

        const searchParams = new URLSearchParams(`user_session=${this.token.token}`);

        for (let param in params) searchParams.set(param, params[param]);

        const options: RequestOptions = new RequestOptions({
            url: url,
            method: RequestMethod.Get,
            headers: headers,
            search: searchParams,
            withCredentials: withCredentials
        });

        const request = new Request(options);

        return this.makeRequest(request);
    }

    post(path: string, body?: Object, params?: Object, useDataProperty?: boolean, withCredentials?: boolean): Observable<any>
    {
        this.checkAuthorised();

        const url: string = this.baseUrl + path;

        const headers: Headers = new Headers({
            'Accept': 'application/json',
            'Content-Type': 'application/json',
        });

        const data = JSON.stringify(useDataProperty ? {data: body} : body);

        const searchParams = new URLSearchParams(`user_session=${this.token.token}`);

        for (let param in params) searchParams.set(param, params[param]);

        const options: RequestOptions = new RequestOptions({
            url: url,
            method: RequestMethod.Post,
            headers: headers,
            body: data,
            search: searchParams,
            withCredentials: withCredentials
        });

        const request = new Request(options);

        return this.makeRequest(request);
    }

    makeRequest(request: Request)
    {
        return this.intercept(this.http.request(request).map(res => res.json()));
    }

    intercept(observable: Observable<any>)
    {
        return observable.catch(err =>
        {

            if (err.status === 401)
            {
                return this.unauthorised();

            } else if (err.status === 403)
            {
                return this.forbidden();
            } else
            {
                return Observable.throw(err);
            }
        });
    }

    unauthorised(): Observable<any>
    {
        this.tokenService.clear();
        this.router.navigate(['/login']);
        return Observable.empty();
    }

    forbidden(): Observable<any>
    {
        this.router.navigate(['/']);
        return Observable.empty();
    }

    checkAuthorised(): void
    {
        if (!this.token.token.length)
        {
            this.router.navigate(['login']);
        }
    }


}
11
rtn

私たちのチームでこれに取り組んできた1つの方向は、APIクライアントクラスを実装することです。このAPIクライアントは、元のHttpサービスをラップします。

Httpサービスはオブザーバブルを生成するため、Httpサービスによって生成された元のオブザーバブルにmap、flatMap、catch演算子などの演算子を追加することで、その動作を簡単に拡張できます。 。

この例は、発生している問題を解決するための出発点として役立つと思います。

import { ApiRequestOptions } from './api-request-options.service';
import { Http, Response, RequestOptions, ResponseContentType } from '@angular/http';

import 'rxjs/add/observable/Zip';
import 'rxjs/add/operator/map';
import { Observable } from 'rxjs/Rx';
import { Injectable } from '@angular/core';
import { Router } from '@angular/router';

@Injectable()
export class ApiClient {
    // PLease note, the API request options service is a helper that we introduced
    // to generate absolute URLs based on settings in the client.
    // I did not include it here for brevity.
    constructor(private router: Router, private http: Http, private requestOptions: ApiRequestOptions) {

    }

    get<TResponse>(path: string, queryStringParams?: any): Observable<TResponse> {
        let self = this;

        return Observable.Zip(
            this.requestOptions.absoluteUrlFor(path, queryStringParams),
            this.requestOptions.authorizedRequestOptions()
        ).flatMap(requestOpts => {
            let [url, options] = requestOpts;
            return self.http.get(url, options);
        }).catch(response => {
            if (response.status === 401) {
                self.router.navigate(['/login']);
            }

            return response;
        }).map((response: Response) => <TResponse>response.json());
    }

    post<TResponse>(path: string, body: any): Observable<TResponse> {
        let self = this;

        return Observable.Zip(
            this.requestOptions.absoluteUrlFor(path),
            this.requestOptions.authorizedRequestOptions()
        ).flatMap(requestOpts => {
            let [url, options] = requestOpts;
            return self.http.post(url, body, options);
        }).catch(response => {
            if (response.status === 401) {
                self.router.navigate(['/login']);
            }

            return response;
        }).map((response: Response) => <TResponse>response.json());
    }

    put<TResponse>(path: string, body: any): Observable<TResponse> {
        let self = this;

        return Observable.Zip(
            this.requestOptions.absoluteUrlFor(path),
            this.requestOptions.authorizedRequestOptions()
        ).flatMap(requestOpts => {
            let [url, options] = requestOpts;
            return self.http.put(url, body, options);
        }).catch(response => {
            if (response.status === 401) {
                self.router.navigate(['/login']);
            }

            return response;
        }).map((response: Response) => {
            if (response.status === 200) {
                return <TResponse>response.json();
            } else {
                return null;
            }
        });
    }

    delete(path: string): Observable<Response> {
        let self = this;

        return Observable.Zip(
            this.requestOptions.absoluteUrlFor(path),
            this.requestOptions.authorizedRequestOptions()
        ).flatMap(requestOpts => {
            let [url, options] = requestOpts;
            return self.http.delete(url, options);
        }).catch(response => {
            if (response.status === 401) {
                self.router.navigate(['/login']);
            }

            return response;
        });
    }
}
1
Willem Meints