久久精品中文字幕av,av.涩涩涩涩涩涩涩涩,亚洲国产日韩欧美精品成人久久久,成人福利电影免费在线观看,日产国产原创av,日韩av午夜激情,bt天堂中文字幕,超级碰人妻在线视频,欧美老熟妇久久一区二区

# 對(duì)接后臺(tái) 本節(jié)我們嘗試完成個(gè)人中心后臺(tái)的對(duì)接。 ## 接口信息 我們?yōu)榇蠹姨峁┝巳缦陆涌趤?lái)獲取當(dāng)前登錄用戶的基本信息： ```bash GET /teacher/me ``` #### 參數(shù) Parameters | type | name | Description | Schema | | ---------- | ------------------------------- | ------------ | ---------------- | | **Header** | **認(rèn)證x-auth-token** *requried* | 獲取登錄信息 | 當(dāng)前登錄教師實(shí)體 | #### 返回值 Responses | HTTP Code | Description | Schema | | --------- | ------------------------------------------------------ | ------ | | **200** | 認(rèn)證x-auth-token合法 | Ok | | **401** | 未攜帶x-auth-token信息，未攜帶的x-auth-token信息不正確 | 未授權(quán) | 接口中提到了x-auth-token信息，我們暫時(shí)先不考慮它，看看按以前請(qǐng)求思想會(huì)發(fā)生什么。 ## HttpClient ```typescript +++ b/first-app/src/app/personal-center/personal-center.component.ts @@ -1,5 +1,6 @@ import {Component, OnInit} from '@angular/core'; import {Teacher} from '../entity/teacher'; +import {HttpClient} from '@angular/common/http'; @Component({ selector: 'app-personal-center', @@ -9,18 +10,14 @@ import {Teacher} from '../entity/teacher'; export class PersonalCenterComponent implements OnInit { me = {} as Teacher; - constructor() { + constructor(private httpClient: HttpClient) { } ngOnInit(): void { - this.me = new Teacher( - 1, - 'zhangsan@yunzhi.club', - '張三', - 'password', - null as unknown as boolean, - 'zhangsan' - ); + const url = 'http://angular.api.codedemo.club:81/teacher/me'; + this.httpClient.get<Teacher>(url) + .subscribe(teacher => this.me = teacher, + error => console.log('請(qǐng)求發(fā)生錯(cuò)誤', error)); } } ``` 單元測(cè)試中的動(dòng)態(tài)測(cè)試模塊： ```typescript +++ b/first-app/src/app/personal-center/personal-center.component.spec.ts @@ -2,6 +2,7 @@ import {ComponentFixture, TestBed} from '@angular/core/testing'; import {PersonalCenterComponent} from './personal-center.component'; import {SexPipe} from './sex.pipe'; +import {HttpClientModule} from '@angular/common/http'; describe('PersonalCenterComponent', () => { let component: PersonalCenterComponent; @@ -9,7 +10,8 @@ describe('PersonalCenterComponent', () => { beforeEach(async () => { await TestBed.configureTestingModule({ - declarations: [PersonalCenterComponent, SexPipe] + declarations: [PersonalCenterComponent, SexPipe], + imports: [HttpClientModule] }) .compileComponents(); }); @@ -20,7 +22,7 @@ describe('PersonalCenterComponent', () => { fixture.detectChanges(); }); - it('should create', () => { + fit('should create', () => { expect(component).toBeTruthy(); fixture.autoDetectChanges(); }); ``` 測(cè)試結(jié)果：  ## 登錄 與前面章節(jié)中對(duì)教師的操作不同，后臺(tái)獲取當(dāng)前登錄教師的接口必須在**用戶登錄成功**后，才能夠獲取到。也就是說(shuō)只有登錄的用戶才有資格訪問(wèn)該接口。 那么如果在請(qǐng)求該接口前先完成用戶的登錄，是否可以請(qǐng)求成功呢？心動(dòng)不如行動(dòng)，我們參考登錄組件簡(jiǎn)單寫(xiě)下代碼： ```typescript +++ b/first-app/src/app/personal-center/personal-center.component.ts @@ -1,5 +1,6 @@ import {Component, OnInit} from '@angular/core'; import {Teacher} from '../entity/teacher'; +import {HttpClient, HttpHeaders} from '@angular/common/http'; @Component({ selector: 'app-personal-center', @@ -9,18 +10,29 @@ import {Teacher} from '../entity/teacher'; export class PersonalCenterComponent implements OnInit { me = {} as Teacher; - constructor() { + constructor(private httpClient: HttpClient) { } ngOnInit(): void { - this.me = new Teacher( - 1, - 'zhangsan@yunzhi.club', - '張三', - 'password', - null as unknown as boolean, - 'zhangsan' - ); - } + const authString = 'zhangsan:codedemo.club'; + const authToken = btoa(authString); + let httpHeaders = new HttpHeaders(); + httpHeaders = httpHeaders.append('Authorization', 'Basic ' + authToken); + this.httpClient + .get<Teacher>( + 'http://angular.api.codedemo.club:81/teacher/login', + {headers: httpHeaders}) + .subscribe(() => { + console.log('登錄成功，接著嘗試獲取當(dāng)前登錄用戶'); + const url = 'http://angular.api.codedemo.club:81/teacher/me'; + this.httpClient.get<Teacher>(url) + .subscribe(teacher => { + console.log('請(qǐng)求當(dāng)前登錄用戶成功'); + this.me = teacher; + }, + error => console.log('請(qǐng)求當(dāng)前登錄用戶發(fā)生錯(cuò)誤', error)); + }, + error => console.log('發(fā)生錯(cuò)誤, 登錄失敗', error)); + } } ```  > 注意：此時(shí)的用戶名可能已經(jīng)不是`zhangsan`，請(qǐng)參考登錄一節(jié)查看當(dāng)前可用的用戶名。 可見(jiàn)：即使是在請(qǐng)求當(dāng)前用戶前發(fā)起登錄請(qǐng)求，在登錄成功的情況下仍然沒(méi)有被后臺(tái)認(rèn)為是**已認(rèn)證用戶**。 ## 再學(xué)COOKIE 而值得一提的是：在前后臺(tái)統(tǒng)一的項(xiàng)目中，先完成用戶登錄再進(jìn)行請(qǐng)求，是可以請(qǐng)求成功的。為什么會(huì)發(fā)生這種情況呢？ 在前后臺(tái)地址相同的情況下，瀏覽器會(huì)自動(dòng)處理用于認(rèn)為的cookie信息。包括：將后臺(tái)返回的cookie信息緩存到瀏覽器中，以及再次請(qǐng)求中自動(dòng)在header中攜帶當(dāng)前已緩存的cookie信息。 比如我們?cè)跒g覽器中直接訪問(wèn) [http://angular.api.codedemo.club:81](http://angular.api.codedemo.club:81)，則會(huì)在請(qǐng)求頭中發(fā)現(xiàn)如下信息（如果沒(méi)有，就再次訪問(wèn)一次）：  該信息則由瀏覽器自動(dòng)處理。 但如果我們?cè)诋?dāng)前項(xiàng)目中向樣的地址發(fā)起請(qǐng)求，則會(huì)發(fā)現(xiàn)請(qǐng)求頭中并沒(méi)有攜帶cookie信息，反而增加了Origin信息：  實(shí)際上，即使是我們使用類(lèi)似于登錄時(shí)的代碼，手動(dòng)的在header中添加cookie信息，瀏覽器在發(fā)起請(qǐng)求時(shí)也會(huì)將此信息刪除。 ```typescript +++ b/first-app/src/app/personal-center/personal-center.component.ts @@ -18,6 +18,7 @@ export class PersonalCenterComponent implements OnInit { const authToken = btoa(authString); let httpHeaders = new HttpHeaders(); httpHeaders = httpHeaders.append('Authorization', 'Basic ' + authToken); + httpHeaders = httpHeaders.append('Cookie', 'test cookie'); this.httpClient .get<Teacher>( ```  這是瀏覽器出于保護(hù)普通的用戶，在安全方面做的考慮。 瀏覽器將這種在`http://localhost:4200`下請(qǐng)求`http://angular.api.codedemo.club:81`的請(qǐng)求稱為**跨域**請(qǐng)求。也就是說(shuō)，瀏覽器將`http://localhost:4200`與`http://angular.api.codedemo.club:81`認(rèn)為是兩個(gè)**域**。瀏覽器進(jìn)行跨域判斷時(shí)，將對(duì)以下三個(gè)因素進(jìn)行判斷： 1. 協(xié)議是否相同。比如在`http://www.codedemo.club`與`https://www.codedemo.club`的協(xié)議一個(gè)是`http`，一個(gè)是`https`，則認(rèn)為協(xié)議不同。將被識(shí)別為跨域。 2. 域名是否相同。比如https://www.baidu.com與http://www.google.com，由于域名分別是`www.baidu.com`及`www.google.com`，所以認(rèn)為域名不同。將被識(shí)別為跨域。 3. 端口號(hào)是否相同。瀏覽器發(fā)起請(qǐng)求時(shí)，會(huì)默認(rèn)省略http協(xié)議的80端口，以及https協(xié)議的443端口。所以訪問(wèn)：http://www.baidu.com，則相當(dāng)于訪問(wèn)：http://www.baidu.com:80；訪問(wèn)https://www.baidu.com，則相當(dāng)于訪問(wèn)：https://www.baidu.com:443。除此以外，我們還可以為其指定特定的端口，比如我們的后臺(tái)地址為：`http://angular.api.codedemo.club:81`。該地址與`http://angular.api.codedemo.club`，一個(gè)端口為81，另一個(gè)為默認(rèn)的80，不同。將被識(shí)別為跨域。 瀏覽器在發(fā)起請(qǐng)求時(shí)，如果發(fā)現(xiàn)請(qǐng)求的地址與當(dāng)前訪問(wèn)的地址在協(xié)議、域名以及端口號(hào)上有任意一點(diǎn)不同的時(shí)候，則將此次請(qǐng)求識(shí)別為跨域請(qǐng)求。 跨域更像是電影中的諜戰(zhàn)片，瀏覽器發(fā)現(xiàn)有人向外部傳遞信息時(shí)，自動(dòng)的過(guò)濾掉被其認(rèn)為是敏感信息的Cookie，以達(dá)到身份認(rèn)證信息不被壞人獲取的目的（其實(shí)目的不是這樣的，但這不重要，只要知道Cookie是敏感信息，瀏覽器過(guò)濾掉了就可以）。 瀏覽器過(guò)濾掉了原來(lái)自動(dòng)攜帶的用于認(rèn)證的Cookie，這使得在跨域請(qǐng)求中，必須采取其的認(rèn)證方式。 ## 域 什么是域呢？如果你對(duì)網(wǎng)絡(luò)知識(shí)感興趣，或是嘗試建立過(guò)個(gè)人站點(diǎn)，那么對(duì)它肯定不陌生。在建立個(gè)人站點(diǎn)時(shí)，重要的一環(huán)就是購(gòu)買(mǎi)域名，比如`codedemo.club`就是一個(gè)域名。 域?yàn)閐omain的譯文，原意為`范圍、領(lǐng)土`，簡(jiǎn)單來(lái)說(shuō)就是用它來(lái)表示一定的范圍。在現(xiàn)實(shí)生活中，我們接觸了很多域。比如國(guó)家是一個(gè)域、省是一個(gè)域、市縣等都是一個(gè)域。有了域，我們就能快速的根據(jù)域來(lái)找現(xiàn)實(shí)生活中的事物通訊，比如由于河北工業(yè)大學(xué)座落天津市這個(gè)域，所以我們?cè)谂c河北工業(yè)大學(xué)通訊時(shí)，可以先指定其域名**天津**，可見(jiàn)域就是指范圍。當(dāng)前我們的現(xiàn)實(shí)世界里有個(gè)頂級(jí)的大域是宇宙，然后第二個(gè)域是地球，接下來(lái)的域有國(guó)家、省、市等。 在計(jì)算機(jī)的網(wǎng)絡(luò)世界里同樣也是如此，網(wǎng)絡(luò)里也有根域名、二級(jí)域名、三級(jí)域名：  每個(gè)域名下都可以有很多臺(tái)計(jì)算機(jī)，每臺(tái)計(jì)算機(jī)在當(dāng)前域下都有一個(gè)唯一的名字，我們把域名下計(jì)算機(jī)的名字稱作主機(jī)名。在進(jìn)行http請(qǐng)求時(shí)，實(shí)際上是域中的某個(gè)計(jì)算機(jī)發(fā)起請(qǐng)求，所以在請(qǐng)求時(shí)要指名這個(gè)主機(jī)名。 ### 域名 知道了什么是域，域名就簡(jiǎn)單了。這就像是張三是張三的名字，李四是李四的名字，河北工業(yè)大學(xué)是河北工業(yè)大學(xué)的名字一樣。為了區(qū)分不同的域，就需要對(duì)不同的域起名字。所以域名就是域的名字。 ## CORS 所以瀏覽器認(rèn)為的跨域的請(qǐng)求，實(shí)際上是考慮了域、協(xié)議以及端口號(hào)。即使在同一個(gè)域下，如果協(xié)議或是端口號(hào)不同，也么被瀏覽器認(rèn)為是跨域訪問(wèn)。我們把域、協(xié)議以及端口號(hào)也稱為**同源**的三要素，即如果兩個(gè)請(qǐng)求的域、協(xié)議以及端口號(hào)均相同時(shí)，則認(rèn)為兩個(gè)請(qǐng)求是同源的，而非同源則被認(rèn)為是跨域的。所以，實(shí)際上**跨域**這個(gè)專有名詞是不確切、不足以正確的表達(dá)其中的含義的，正確的專有名詞應(yīng)該是**跨源**，全稱為**跨源資源共享**，對(duì)應(yīng)英文原文為：Cross-Origin Resource Sharing，稱寫(xiě)為`CORS`。 而在前后臺(tái)分離的項(xiàng)目中，前臺(tái)與后臺(tái)的分離架構(gòu)導(dǎo)致了前后臺(tái)必然不同源，而不同源時(shí)瀏覽器必然不攜帶cookie信息，也就無(wú)法實(shí)現(xiàn)**自動(dòng)認(rèn)證**。所以在CORS中，我們一般使用其它的認(rèn)證方法。在下個(gè)小節(jié)中，我們將對(duì)其中的一種進(jìn)行介紹。 | 名稱 | 地址 | | | ---------------------- | ------------------------------------------------------------ | ---- | | 跨域資源共享 CORS 詳解 | [https://www.ruanyifeng.com/blog/2016/04/cors.html](https://www.ruanyifeng.com/blog/2016/04/cors.html) | | | 跨源資源共享（CORS） | [https://developer.mozilla.org/zh-CN/docs/Web/HTTP/CORS](https://developer.mozilla.org/zh-CN/docs/Web/HTTP/CORS) | | | 域名 | [https://zh.wikipedia.org/wiki/%E5%9F%9F%E5%90%8D](https://zh.wikipedia.org/wiki/%E5%9F%9F%E5%90%8D) | | | 本節(jié)源碼 | [https://github.com/mengyunzhi/angular11-guild/archive/step4.3.zip](https://github.com/mengyunzhi/angular11-guild/archive/step4.3.zip) | |