# x-auth-token 發生401的根本原因在于后臺認為當前請求非認證用戶（未認證或認證信息失敗），若要使后臺認為當前請求為認證用戶發起的請求，則需要在請求時向后臺發送有效的認證信息。 發送認證信息的方式有很多，比如我們前面在登錄剛剛學習過的Basic認證，還有我們此節中將介紹的x-auth-token認證。至于應該使用使用樣的認證，則需要依照當前后臺的支持情況。 ## Basic 認證 在學習Basic access authentication認證時，我們說后臺提供的認證接口并不拘泥為后臺提供的認證地址。這是因為如果后臺支持Basic認證，則所有需要認證才能夠獲取的資源地址，都可以做為認證地址。換一種方式表達就是：每個需要認證才能獲取的資源地址，都可以通過傳入Basic認證信息的方式來解決認證問題。 獲取當前登錄用戶的資源地址也當然如此。所以，我們可以在請求當前登錄信息時，在header中加入用戶的認證信息。這樣一來，后臺通過Basic認證信息便可以驗證我們的合法身份，近而不再拋出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('請求當前登錄用戶成功'); this.me = teacher; }, error => console.log('請求當前登錄用戶發生錯誤', error)); } } ``` > 請在瀏覽器中打開http://angular.api.codedemo.club/teacher/確認當前系統可用的有效用戶名。  這種方式雖然可行，但如果你就這么開始使用的話絕對又是在挖坑。很多時候我們加入團隊的新成員，都喜歡在違反團隊規定的時候問個為什么。問為什么是好的習慣，應該表揚并堅持。但在團隊開發中，應該是先遵守團隊規范開發，然后再問為什么。而不是違背團隊規范的同時還問為什么。 為什么這種方式可用，又不能用呢？其實類似這樣的問題，都會有非常有說服力的答案，我們做為新手想不明白為什么是非常正常的事情，這受限你當前接觸的領域、所學的知識以及沒有過多的接觸生產環境多種因素。而如果因為自己想不明白為什么就不按規范開發，就是沒有團隊精神的表現。 我們的確可以在用戶登錄時記住用戶的用戶名和密碼，然后用戶名密碼放到每次請求的header中進行認證。在我們不考慮安全因素的情況下，其在如下場景下則會產生bug。 1. 張三在地點A，登錄了系統 2. 張三正常使用系統 3. 管理員在地點B變更了張三用戶名或密碼 4. 張三使用原用戶名密碼登錄時產生錯誤 當然了，如下場景也會產生BUG。 1. 張三使用手機APP登錄了系統 2. 張三又使用了電腦登錄了系統 3. 張三在手機APP上修改了密碼 4. 張三在電腦上使用的系統將產生錯誤 綜上所述Basic 認證僅適用于首次登錄系統時使用，用戶登錄成功后則應該使用其它方法來完成用戶的認證。 ## X-AUTH-TOKEN 在同源情況下瀏覽器在請求時自動帶入了cookie信息，所謂的cookie信息其實就是后臺在header中發送給前臺的一串字符。后臺在首次請求時生成了這串字符，并在響應時加入到響應header中，瀏覽器接收響應后根據Cookie關鍵字在響應header中獲取到這串字符串，并緩存在了本地。當下次再向該地址發起請求時，瀏覽器又自動加入了緩存的Cookie信息。  X-auth-token的認證的方式也是這個原理，不同的是header中的cookie會被瀏覽器在同源請求時自動緩存，自動帶入請求header。而X-auth-token則需要我們手動的處理。 我們當前的后臺，在請求無論用戶認證與否，都可以在響應頭中x-auth-token：  用戶一旦登錄成功，該x-auth-token便會自動在后臺完成與登錄用戶的綁定，我們再次請求時可以將該token以header的形式傳入后臺。 在當前代碼的基礎上，我們在控制臺的網絡中找到這個x-auth-token：  并把它復制下來，然后將其加入到請求當前登錄用戶的header中： **注意**：你在學習時將會得到一組與教程不一樣的x-auth-token，你應該使用自己得到的那個，而非照抄教程提供的。 ```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('請求當前登錄用戶成功'); this.me = teacher; }, error => console.log('請求當前登錄用戶發生錯誤', error)); } ```   如此以來，我們便可以使用在header中攜帶X-AUTH-TOKEN的方法模擬了cookie的登錄模式。與cookie不同的是，我們需要為每次請求手動的添加這一header信息。 ## 獲取響應header 在控制臺中來獲取x-auth-token顯然是不切實際的。如果要使用這個x-auth-token來完成用戶認證則需要在響應中獲取這個header信息。 HttpClient可以很輕構的獲取到響應的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('請求當前登錄用戶成功'); this.me = teacherResponse.body as Teacher; ?? console.log(teacherResponse.headers.get('x-auth-token')); ?? }, error => console.log('請求當前登錄用戶發生錯誤', error)); } ``` 在請求選項中，增加`observe`并設置為`response`。此時請求成功接收到響應數據格式為`HttpResponse`，響應的主體位于`HttpResponse.body`中，響應頭位于`HttpResponse.headers`中。  ## 本節作業 是時候考核下自己的所學成果了，請實現以下功能： 1. 用戶輸入正確的用戶名密碼后完成登錄。 2. 登錄完成后，繼續訪問http://localhost:4200/personal-center時顯示當前登錄用戶信息。 相信自己，根據當前所學，你絕對已經具備了解決上述問題的能力。 | 名稱 | 地址 | | | -------------------------- | ------------------------------------------------------------ | ---- | | HttpClient獲取完成的響應體 | [https://angular.cn/guide/http#reading-the-full-response](https://angular.cn/guide/http#reading-the-full-response) | | | 本節源碼 | [https://github.com/mengyunzhi/angular11-guild/archive/step4.4.zip](https://github.com/mengyunzhi/angular11-guild/archive/step4.4.zip) | |