web-dev-qa-db-ja.com

angular 4+でcookieを使用して取得および投稿する方法

Angular4 +がGETとPOSTを実行する上でCookieを使用する方法の例またはリファレンスを提供できますか？ angularJSではドキュメント化されていますが、Angular.ioではドキュメント化されていません。これに相当するもの：Angular4 +での "//code.angularjs.org/X.Y.Z/angular-cookies.js"

angularpostcookiesget
3
Carlos E

私は次のようなものを書いてしまいました：

 public postSomethingToServer(myUrl: string): Observable<any> {
    var body = `{"username":"ddd","password":"ddd"}`;
    const headers = new Headers();
    headers.append('Content-Type', 'application/json');
    let options = new RequestOptions({ headers: headers, withCredentials: true });
    return this.http.post(myUrl, body, options)
      .map((response) => {

        return response.json(); 
      })
      .catch(this.handleError);
  }

リクエストでCookieを送信するには、クラスRequestOptionsに渡されるオブジェクトで（withCredentials：true）が必要でした。

CORSの構成に必要な別のサーバーでクライアントとサーバーが実行されている場合、ASP Net Coreアプリの場合

app.UseCors(config =>
                config.AllowAnyOrigin()                    
                      .AllowCredentials());

他の人が同じ問題に直面した場合。

0
Carlos E

新しいAngular 5を使用している場合、HttpInterceptor（ https://angular.io/guide/http#intercepting-all-要求または応答 ）

あなたができることはあなたのクッキーを取得してそれに応じてそれを処理するインターセプターを作成することです。

import {Injectable} from '@angular/core';
import {HttpEvent, HttpInterceptor, HttpHandler, HttpRequest} from '@angular/common/http';

    function getCookie(name) {
     const splitCookie = cookie.split(';');
     for (let i = 0; i < splitCookie.length; i++) {
      const splitValue = val.split('=');
       if (splitValue[0] === name) {
         return splitValue[1];
       }
     }
     return '';
    }

    @Injectable()
    export class AuthInterceptor implements HttpInterceptor {
      constructor(private auth: AuthService) {}

      intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
        // Get the auth header from the service.
        const authHeader = getCookie('auth');
        // Clone the request to add the new header.
        const authReq = req.clone({headers: req.headers.set('Authorization', authHeader)});
        // Pass on the cloned request instead of the original request.
        return next.handle(authReq);
      }
    }

次のようなライブラリを使用してCookieを処理することもできます： https://github.com/salemdar/ngx-cookie

6
Everest