Angular 2+ 中的 Web 令牌答案

【问题标题】：Web tokens in Angular 2+Angular 2+ 中的 Web 令牌
【发布时间】：2018-02-24 19:17:02
【问题描述】：

我正在通过登录组件向后端 REST API 发送 POST 请求。我在响应标头中得到了一个 x-auth 令牌。如何获取和存储此令牌，以便在用户登录会话期间将其用于所有其他 API 请求？干杯

【问题讨论】：

一个cookie，会话存储，本地存储。

【解决方案1】：

localStorage.setItem('token', response.access_token);

这就是我使用 Angular 5 的方式：

我的登录服务：

import { Injectable } from '@angular/core';
import { HttpHeaders, HttpParams } from '@angular/common/http';

import { HttpService } from '../services/http.service';

@Injectable()
export class LoginService{
    constructor(private _http: HttpService) {
    }

    login(user: string, pass: string) {
        const params = new HttpParams()
            .append('grant_type', 'password')
            .append('username', user)
            .append('password', pass);
        const headers = new HttpHeaders()
            .set('Content-Type', 'application/x-www-form-urlencoded');
        return this._http.post('login', params, { headers: headers });
    }
}

我的登录组件：

import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';

import { LoginService } from '../../services';

@Component({
    selector: 'app-login',
    templateUrl: './login.component.html'
})
export class LoginComponent implements OnInit {
    public pageTitle = 'User login';
    errorMessage = '';
    loginFormGroup: FormGroup;
    constructor(
        private fb: FormBuilder,
        private _loginService: LoginService) { }
    ngOnInit() {
        this.formBuild();
    }

    formBuild() {
        this.loginFormGroup = this.fb.group({
            loginUser: ['', [Validators.required]],
            loginPass: ['', [Validators.required]],
        });
    }

    onLogin() {
        let response: any;
        this._loginService.login(this.loginFormGroup.value.loginUser, this.loginFormGroup.value.loginPass)
            .subscribe(
                response => { response= response; },
                error => { this.errorMessage = <any>error; },
                () => {

                    localStorage.setItem('token', response.access_token);
                });
    }
}

我将令牌保存在 localeStorage 中。

我已经为使用这个令牌创建了拦截器：

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

@Injectable()
export class TokenInterceptor implements HttpInterceptor {
    intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
        const token = localStorage.getItem('token');
        request = request.clone({
            setHeaders: {
                Authorization: `Bearer ${token}`
            }
        });
        return next.handle(request);
    }
}

export const TokenInterceptorProvider = {
    provide: HTTP_INTERCEPTORS,
    useClass: TokenInterceptor,
    multi: true
};

这个解决方案来自 Angular 5 和 HTTPClient。如果您只需要 Angular 2 的解决方案，请告诉我，我会将其发布给您。

【讨论】：

不错的一个。非常感谢您的解决方案，非常感谢
很高兴能提供帮助。你会接受我的回答吗？

【解决方案2】：

将您收到的令牌存储在 Web 浏览器的本地存储中，并使用 http 拦截器从所有响应中删除令牌并将令牌添加到所有请求中。

【讨论】：

你能告诉我如何将它用于拦截器吗？
@YashwardhanPauranik stackoverflow.com/questions/44396890/angular-4-http-interceptor

【解决方案3】：

使用NgCookie 模块你可以这样设置：

  $cookies.put("token","your_response_val");

之后再使用....$cookies.get ()

【讨论】：

约定是使用本地\会话存储。除其他优点外，它消除了XSRF的风险
@Stavm 会话不是持久的，并且本地存储没有被完全采用。只要您使用 httponly 标志，您就可以将令牌存储在 Cookie 中。