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

# x-auth-token 發(fā)生401的根本原因在于后臺認(rèn)為當(dāng)前請求非認(rèn)證用戶（未認(rèn)證或認(rèn)證信息失?。?，若要使后臺認(rèn)為當(dāng)前請求為認(rèn)證用戶發(fā)起的請求，則需要在請求時(shí)向后臺發(fā)送有效的認(rèn)證信息。 發(fā)送認(rèn)證信息的方式有很多，比如我們前面在登錄剛剛學(xué)習(xí)過的Basic認(rèn)證，還有我們此節(jié)中將介紹的x-auth-token認(rèn)證。至于應(yīng)該使用使用樣的認(rèn)證，則需要依照當(dāng)前后臺的支持情況。 ## Basic 認(rèn)證 在學(xué)習(xí)Basic access authentication認(rèn)證時(shí)，我們說后臺提供的認(rèn)證接口并不拘泥為后臺提供的認(rèn)證地址。這是因?yàn)槿绻笈_支持Basic認(rèn)證，則所有需要認(rèn)證才能夠獲取的資源地址，都可以做為認(rèn)證地址。換一種方式表達(dá)就是：每個(gè)需要認(rèn)證才能獲取的資源地址，都可以通過傳入Basic認(rèn)證信息的方式來解決認(rèn)證問題。 獲取當(dāng)前登錄用戶的資源地址也當(dāng)然如此。所以，我們可以在請求當(dāng)前登錄信息時(shí)，在header中加入用戶的認(rèn)證信息。這樣一來，后臺通過Basic認(rèn)證信息便可以驗(yàn)證我們的合法身份，近而不再拋出401異常了。 ```typescript +++ b/first-app/src/app/personal-center/personal-center.component.ts export class PersonalCenterComponent implements OnInit { me = {} as Teacher; constructor(private httpClient: HttpClient) { } ngOnInit(): void { const authString = 'zhangsan:codedemo.club'; const authToken = btoa(authString); let httpHeaders = new HttpHeaders(); httpHeaders = httpHeaders.append('Authorization', 'Basic ' + authToken); const url = 'http://angular.api.codedemo.club:81/teacher/me'; this.httpClient.get<Teacher>(url, {headers: httpHeaders}) .subscribe(teacher => { console.log('請求當(dāng)前登錄用戶成功'); this.me = teacher; }, error => console.log('請求當(dāng)前登錄用戶發(fā)生錯(cuò)誤', error)); } } ``` > 請?jiān)跒g覽器中打開http://angular.api.codedemo.club/teacher/確認(rèn)當(dāng)前系統(tǒng)可用的有效用戶名。  這種方式雖然可行，但如果你就這么開始使用的話絕對又是在挖坑。很多時(shí)候我們加入團(tuán)隊(duì)的新成員，都喜歡在違反團(tuán)隊(duì)規(guī)定的時(shí)候問個(gè)為什么。問為什么是好的習(xí)慣，應(yīng)該表揚(yáng)并堅(jiān)持。但在團(tuán)隊(duì)開發(fā)中，應(yīng)該是先遵守團(tuán)隊(duì)規(guī)范開發(fā)，然后再問為什么。而不是違背團(tuán)隊(duì)規(guī)范的同時(shí)還問為什么。 為什么這種方式可用，又不能用呢？其實(shí)類似這樣的問題，都會有非常有說服力的答案，我們做為新手想不明白為什么是非常正常的事情，這受限你當(dāng)前接觸的領(lǐng)域、所學(xué)的知識以及沒有過多的接觸生產(chǎn)環(huán)境多種因素。而如果因?yàn)樽约合氩幻靼诪槭裁淳筒话匆?guī)范開發(fā)，就是沒有團(tuán)隊(duì)精神的表現(xiàn)。 我們的確可以在用戶登錄時(shí)記住用戶的用戶名和密碼，然后用戶名密碼放到每次請求的header中進(jìn)行認(rèn)證。在我們不考慮安全因素的情況下，其在如下場景下則會產(chǎn)生bug。 1. 張三在地點(diǎn)A，登錄了系統(tǒng) 2. 張三正常使用系統(tǒng) 3. 管理員在地點(diǎn)B變更了張三用戶名或密碼 4. 張三使用原用戶名密碼登錄時(shí)產(chǎn)生錯(cuò)誤 當(dāng)然了，如下場景也會產(chǎn)生BUG。 1. 張三使用手機(jī)APP登錄了系統(tǒng) 2. 張三又使用了電腦登錄了系統(tǒng) 3. 張三在手機(jī)APP上修改了密碼 4. 張三在電腦上使用的系統(tǒng)將產(chǎn)生錯(cuò)誤 綜上所述Basic 認(rèn)證僅適用于首次登錄系統(tǒng)時(shí)使用，用戶登錄成功后則應(yīng)該使用其它方法來完成用戶的認(rèn)證。 ## X-AUTH-TOKEN 在同源情況下瀏覽器在請求時(shí)自動帶入了cookie信息，所謂的cookie信息其實(shí)就是后臺在header中發(fā)送給前臺的一串字符。后臺在首次請求時(shí)生成了這串字符，并在響應(yīng)時(shí)加入到響應(yīng)header中，瀏覽器接收響應(yīng)后根據(jù)Cookie關(guān)鍵字在響應(yīng)header中獲取到這串字符串，并緩存在了本地。當(dāng)下次再向該地址發(fā)起請求時(shí)，瀏覽器又自動加入了緩存的Cookie信息。  X-auth-token的認(rèn)證的方式也是這個(gè)原理，不同的是header中的cookie會被瀏覽器在同源請求時(shí)自動緩存，自動帶入請求header。而X-auth-token則需要我們手動的處理。 我們當(dāng)前的后臺，在請求無論用戶認(rèn)證與否，都可以在響應(yīng)頭中x-auth-token：  用戶一旦登錄成功，該x-auth-token便會自動在后臺完成與登錄用戶的綁定，我們再次請求時(shí)可以將該token以header的形式傳入后臺。 在當(dāng)前代碼的基礎(chǔ)上，我們在控制臺的網(wǎng)絡(luò)中找到這個(gè)x-auth-token：  并把它復(fù)制下來，然后將其加入到請求當(dāng)前登錄用戶的header中： **注意**：你在學(xué)習(xí)時(shí)將會得到一組與教程不一樣的x-auth-token，你應(yīng)該使用自己得到的那個(gè)，而非照抄教程提供的。 ```typescript +++ b/first-app/src/app/personal-center/personal-center.component.ts ngOnInit(): void { let httpHeaders = new HttpHeaders(); httpHeaders = httpHeaders.append('x-auth-token', '02d4bb26-991e-4902-b80f-3ef436909766'); const url = 'http://angular.api.codedemo.club:81/teacher/me'; this.httpClient.get<Teacher>(url, {headers: httpHeaders}) .subscribe(teacher => { console.log('請求當(dāng)前登錄用戶成功'); this.me = teacher; }, error => console.log('請求當(dāng)前登錄用戶發(fā)生錯(cuò)誤', error)); } ```   如此以來，我們便可以使用在header中攜帶X-AUTH-TOKEN的方法模擬了cookie的登錄模式。與cookie不同的是，我們需要為每次請求手動的添加這一header信息。 ## 獲取響應(yīng)header 在控制臺中來獲取x-auth-token顯然是不切實(shí)際的。如果要使用這個(gè)x-auth-token來完成用戶認(rèn)證則需要在響應(yīng)中獲取這個(gè)header信息。 HttpClient可以很輕構(gòu)的獲取到響應(yīng)的header信息： ```typescript +++ b/first-app/src/app/personal-center/personal-center.component.ts import {HttpClient, HttpHeaders, HttpResponse} from '@angular/common/http'; ngOnInit(): void { let httpHeaders = new HttpHeaders(); const authString = 'zhangsan:codedemo.club'; const authToken = btoa(authString); httpHeaders = httpHeaders.append('Authorization', 'Basic ' + authToken); const url = 'http://angular.api.codedemo.club:81/teacher/me'; this.httpClient.get<Teacher>(url, {headers: httpHeaders, observe: 'response'}) ?? .subscribe((teacherResponse: HttpResponse<Teacher>) => { ?? console.log('請求當(dāng)前登錄用戶成功'); this.me = teacherResponse.body as Teacher; ?? console.log(teacherResponse.headers.get('x-auth-token')); ?? }, error => console.log('請求當(dāng)前登錄用戶發(fā)生錯(cuò)誤', error)); } ``` 在請求選項(xiàng)中，增加`observe`并設(shè)置為`response`。此時(shí)請求成功接收到響應(yīng)數(shù)據(jù)格式為`HttpResponse`，響應(yīng)的主體位于`HttpResponse.body`中，響應(yīng)頭位于`HttpResponse.headers`中。  ## 本節(jié)作業(yè) 是時(shí)候考核下自己的所學(xué)成果了，請實(shí)現(xiàn)以下功能： 1. 用戶輸入正確的用戶名密碼后完成登錄。 2. 登錄完成后，繼續(xù)訪問http://localhost:4200/personal-center時(shí)顯示當(dāng)前登錄用戶信息。 相信自己，根據(jù)當(dāng)前所學(xué)，你絕對已經(jīng)具備了解決上述問題的能力。 | 名稱 | 地址 | | | -------------------------- | ------------------------------------------------------------ | ---- | | HttpClient獲取完成的響應(yīng)體 | [https://angular.cn/guide/http#reading-the-full-response](https://angular.cn/guide/http#reading-the-full-response) | | | 本節(jié)源碼 | [https://github.com/mengyunzhi/angular11-guild/archive/step4.4.zip](https://github.com/mengyunzhi/angular11-guild/archive/step4.4.zip) | |