如何在 angular 2 应用程序中保存来自 http json 响应的访问令牌

Question

我从服务器对我的 POST 请求有这个 http 响应：

{"token_type":"Bearer","expires_in":35999,"refresh_token":"PvmIMkmgmawTYKrUWUlqRd9pd6itd5JCeHYqKdgoul","access_token":"eyJhbGciOiJSUzI1NiIsImtpZCI6InNpZ25pbmdrZXkiLCJ4NXQiOiJYU09MYWdXd0o5YjlSMjE4LV94Q3BidTdKWnMifQ.eyJzdWIiOiJDb21tYW5kQ2VudHJhbDAxIiwicmVhbG0iOiJtb3Rvcm9sYXNvbHV0aW9ucy5jb20iLCJleHAiOjE0NjU5MzI0NzgsInNjb3BlIjpbIm1zaV91bnNhcGlfZ3JvdXBtZ3QucmVhZCIsIm1zaV91bnNhcGlfZ3JvdXBtZ3Qud3JpdGUiLCJtc2lfdW5zYXBpX3ByZXNlbmNlLndhdGNoIiwibXNpX3Vuc2FwaV9sb2NhdGlvbi53YXRjaCIsIm1zaV91bnNhcGlfbWVzc2FnaW5nIl0sImNsaWVudF9pZCI6IkNvbW1hbmRDZW50cmFsIiwiaXNzIjoiaHR0cHM6Ly9pZG1wc2IuaW13Lm1vdG9yb2xhc29sdXRpb25zLmNvbTo5MDMxIn0.LRS8ifL8VoHNikvbBaqU6rvqAWT_QJh0KUvbUAZNuo77DMr7eredwfdtNNptdYGfbWvpq00g3ydViCT1Xh4IFsY8-8jqvvY3FStlp0eUdzfJ9QnYJFDEBzrh1ccjCX4nxmEeLpaMSwvMbMsi1ByJNcu9OnDvBSJC82c3la9EGInyGOTMI08WncVwq-8zkuTrv9K9n4wRmjvX_FHsY_OUSlpyJk1iiM_MLyCjH8nTgjCkNskGOEgSSDLrEfMHhdewSag4jFY3_O9RIzrkT3lOJ8sm6ykH6IdckqxDlva8_Ej23J7zr5el6uUUxy04iQQjxct6ToFH1u0TVrC4uednTQ"}

保存此令牌的最佳 angular 2 打字稿方法是什么，以便将其用于对 API 的进一步获取请求。本地存储，饼干？如何以最好的方式做到这一点？到目前为止，我只有一个控制台响应：

this.http.post(url, '')
  .map(res => res.json())
  .subscribe(data => {
    console.log(JSON.stringify(data));
    console.log('Completed');
  });

Answer 1

如果您每次打开页面时都会获得新的令牌数据，那么我只会在运行时将其存储在服务中。

否则，是的 - 本地存储是存储信息的好地方。您甚至可以使自己成为存储的辅助服务：

class StorageService {
    static write(key: string, value: any) {
        if (value) {
            value = JSON.stringify(value);
        }
        localStorage.setItem(key, value);
    }
    static read<T>(key: string): T {
        let value: string = localStorage.getItem(key);
        if (value && value != "undefined" && value != "null") {
            return <T>JSON.parse(value);
        }
        return null;
    }
}

所以你可以像这样使用它：

interface IToken {
    token_type: string;
    expires_in: number;
    refresh_token: string;
    access_token: string;
}
[...]
class TokenService {
    private _token: IToken = null;
    private _url: string = "http://...";
    constructor(private _storageService: StorageService,
                private _http: Http) { }
    getToken(callback: (token: IToken) => void) {
        if (this._token) {
            callback(this._token);
        }
        else {
            this._token = this._storageService.read<IToken>('token');
            if (this._token) {
                callback(this._token);
            }
            else {
                this.http.post(this._url, '')
                    .map(res => res.json())
                    .subscribe(token: IToken => {
                        this._storageService.write('token', token);
                        this._token = token;
                        callback(this._token);
                    }
                );
            }
        }
    }
}

在需要令牌的其他地方，您现在可以像这样使用它：

this._tokenService.getToken((token: IToken) => {
    // do something here
});