【NG-Alain】在框架中的用戶認證


 

此文基於官方文檔教程,是對其代碼細節的解釋文檔。

  可以先嘗試閱讀官方文檔教程,它看起來也不算太難理解。 地址: 點此查看

  當然也可以繼續往下看。 (●'◡'●)

  @delonn/auth 是對認證過程的進一步處理,它只關注並解決以下三個問題:

    1. 如何獲取認證信息
    2. 如何讀寫認證信息並監聽信息變化
    3. 如何使用認證信息(分別在JWT/SWT)

  @deloon/auth 並沒有HTML和CSS代碼,它是完全TS實現,這意味着它只關注對用戶認證這一塊兒的程序邏輯實現,並不關注界面,同時也可以用在其他基於TS的前端項目。

  

import { ITokenService, DA_SERVICE_TOKEN } from '@delon/auth';

 

  在@delonn/auth 中,有一個最關鍵的服務,它將與用戶直接打交道——ITokenService

  login.component.ts 文件

  如上圖所示,使用 InjectionToken模式獲取ITokenService的依賴注入。

  

  在當用戶登錄成功並且獲取到后台API返回的令牌后,通過調用ITokenService的set方法寫入本地存儲。set方法需要傳入一個對象,該對象必須滿足接口 ITokenModel,此接口只有一個string類型的token屬性。

  業務模型理應如右圖所示:  

  攔截器  

  SimpleInterceptor是ng-alain內置的一個攔截器,它會在httpClient對象的post、get、delete、putch等方法中自動填入我們剛剛存儲到本地的token信息。

  

  設置此攔截器的提供商。同時你需要知道的是此攔截器框架由angular設計,非ng-alain。

  攔截器的源代碼

  該文件位於【node_modules\_@delon_auth@0.6.5@@delon\auth\token\simple\simple.interceptor.js】

  定位到SimpleInterceptor.prototype.intercept方法的實現。

  

  方法的第一部分代碼實現了檢查忽略列表,忽略ignores中存儲的URL地址,這意味着並不會插入token。所以這個列表中必須有登錄API,好讓登錄頁能正常發起請求而不是由攔截器中止請求。

  方法的第二部分設置了例外情況,如果你在@delon/auth模塊的全局設定對象【AuthOptions】的屬性allow-anonmous-key設置為true,或請求參數params中包含allow-anonymous-key,也將忽略token,直接發起請求。

  

  方法的第三部分獲取ITokenService對象並將token取出,根據全局設定對象的屬性【token_send_place】中指示的位置將token按規則插入,緊接着發起請求。

  方法的第四部分是上圖的else代碼段。當model或model.token沒值時,路由將跳轉到最初設定好的登錄地址。

  在模塊被注入時設置用戶認證的全局設定

  

  用戶認證模塊位於【delon.module.ts】文件,默認僅有兩個屬性生效。

  ignores:博主設置了'/Auth/TokenByUserInfo'為不添加token的URL。所有不在ignores數組中強調的地址都將檢查token,如果沒有將中止請求。

  login_url:設置當缺失token時攔截器自動跳轉的登錄路由。

  store_key:設置存儲在本地token值的鍵名,默認為'token'。可以按需求更改,但在調用ITokenService.set方法時傳遞的對象依然得滿足ITokenModel接口。

  token_send_key:設置token在http請求中的參數名,區別於store_key。

  token_send_place:指示token在http請求中的存儲位置。('header' | 'body' | 'url')

  allow_anonymous_key:允許匿名登錄,請參閱本文上方分析攔截器源代碼的第二部分。

  到這里用戶認證就差不多的了:從登錄成功后存儲token,到發起請求時攜帶token。 我們在使用@delon/auth包時只需要關注這兩點即可。以下是一些特別需求。

  如何將token存儲到瀏覽器的不同位置

  ITokenService是設置token的服務,查閱它的實現不難發現有一個屬性叫IStore,字面意思不用想肯定是存儲,再深究才恍然大悟原來不是ITokenService讀寫本地存儲的token,而是ITokenService借用IStore管理token的讀寫,同時這樣的分離設計也為我們實現不同的存儲器省了不少事兒,為卡色大佬點贊!

  默認情況下token存儲在localStorage中,接下來要實現存儲在sessionStorage中,這意味着token將在瀏覽器關閉時銷毀。

  

  新建一個token存儲器服務並實現IStore接口,無需關注token存儲在本地的鍵名,因為ITokenService會把在用戶認證的全局對象中設定的屬性名傳入(store_key)。

  

  然后在依賴提供商內使用InjectToken模式注冊存儲器服務。

  最后運行項目並登錄用戶后,在dev tools內打印瀏覽器的sessionStorage對象后即會發現token已生效。

  請注意,上面的方法可以設置@delon/auth包的認證信息在瀏覽器不同的位置。但你需要知道的是最新版本已內置sessionStorageStore和memoryStore:

  

  根據項目的實際業務需求在此處設置的兩個依賴注入供應商中保留一個即可。

  權限控制

  

  @delon/acl 包是ng-alain內置的權限控制模塊,在啟動服務內標記為非全量模式,並設置用戶具備的權限點/角色。

  如左圖所示,具備的權限點是一個字符串數組,這是用戶具備的所有權限點。通過對相應標簽設置acl指令來控制顯示還是隱藏。

  <button acl [acl-ability]="'Main.Main'"></button>

  具體可點擊此處查閱設置方法。

 

  

 

 

 

 

 

  感謝閱讀,感謝Ng-Alain。


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM