angular - 从 http 标头选项导入并在 Angular 上弃用请求
问题描述
我需要使用从 Internet 获取的以下代码,但我认为它已经很老了,并且说不推荐使用 http 导入,我该如何解决这个问题?它在所有 http 导入中都给了我错误,如果我更改为 @angular/comon/http 我不知道如何更改 hhtp 标头并在 register 方法中请求。
import { Injectable } from '@angular/core';
import { Http, Response, Headers, RequestOptions } from '@angular/http';
import { UserRegistration } from '../models/user.registration.interface';
import { ConfigService } from '../utils/config.service';
import {BaseService} from "./base.service";
import { Observable } from 'rxjs/Rx';
import { BehaviorSubject } from 'rxjs/Rx';
// Add the RxJS Observable operators we need in this app.
import '../../rxjs-operators';
@Injectable()
export class UserService extends BaseService {
baseUrl: string = '';
// Observable navItem source
private _authNavStatusSource = new BehaviorSubject<boolean>(false);
// Observable navItem stream
authNavStatus$ = this._authNavStatusSource.asObservable();
private loggedIn = false;
constructor(private http: Http, private configService: ConfigService) {
super();
this.loggedIn = !!localStorage.getItem('auth_token');
// ?? not sure if this the best way to broadcast the status but seems to resolve issue on page refresh where auth status is lost in
// header component resulting in authed user nav links disappearing despite the fact user is still logged in
this._authNavStatusSource.next(this.loggedIn);
this.baseUrl = configService.getApiURI();
}
register(email: string, password: string, firstName: string, lastName: string,location: string): Observable<UserRegistration> {
let body = JSON.stringify({ email, password, firstName, lastName,location });
let headers = new Headers({ 'Content-Type': 'application/json' });
let options = new RequestOptions({ headers: headers });
return this.http.post(this.baseUrl + "/accounts", body, options)
.map(res => true)
.catch(this.handleError);
}
login(userName, password) {
let headers = new Headers();
headers.append('Content-Type', 'application/json');
return this.http
.post(
this.baseUrl + '/auth/login',
JSON.stringify({ userName, password }),{ headers }
)
.map(res => res.json())
.map(res => {
localStorage.setItem('auth_token', res.auth_token);
this.loggedIn = true;
this._authNavStatusSource.next(true);
return true;
})
.catch(this.handleError);
}
logout() {
localStorage.removeItem('auth_token');
this.loggedIn = false;
this._authNavStatusSource.next(false);
}
isLoggedIn() {
return this.loggedIn;
}
facebookLogin(accessToken:string) {
let headers = new Headers();
headers.append('Content-Type', 'application/json');
let body = JSON.stringify({ accessToken });
return this.http
.post(
this.baseUrl + '/externalauth/facebook', body, { headers })
.map(res => res.json())
.map(res => {
localStorage.setItem('auth_token', res.auth_token);
this.loggedIn = true;
this._authNavStatusSource.next(true);
return true;
})
.catch(this.handleError);
}
}
解决方案
对于 Angular 4+,请尝试:
import { HttpClient, HttpHeaders } from '@angular/common/http';
constructor(private http: HttpClient)
let headers = new HttpHeaders ({ 'Content-Type': 'application/json' });
private options = { headers: this.headers };
推荐阅读
- javascript - 无法读取未定义的 react-native-app-auth 的属性“授权”
- android - 添加材料设计库时,我的日期选择器无法正常工作
- python-3.x - 批量迭代python列表的最简单方法
- kubernetes - Kubernetes RBAC 动词:没有列表,反之亦然?看没有清单?
- python - 在python中将对象数据类型转换为数字和分类
- xquery - MarkLogic:如何省略空的搜索构面值?
- javascript - 方括号前的分号
- java - Spring 5 + Hibernate 5:SessionFactory 如何与 LocalSessionFactoryBean 自动装配
- ios - iOS 在后台可以扫描多少个 BTLE 设备
- c# - 在 iOS13 上更改状态栏颜色