Angular 4 使用JWT令牌進行使用者身份驗證

2022-02-12 08:10:10 字數 1383 閱讀 8620

[enablecors("

corspolicy")]

[route("

api/[controller]")]

public

class tokencontroller : controller

[enablecors("

corspolicy")]

[authorize(authenticationschemes = jwtbearerdefaults.authenticationscheme)]

[route("

api/[controller]")]

public

class greetingcontroller : controller

準備angular應用程式 我們在這個專案中使用angular 4。 該專案有兩個元件—用於登入頁面的登入元件和用於向經過身份驗證的使用者顯示問候訊息的home元件。 該專案還有兩個服務—authenticationservice用於根據所提供的憑證獲取令牌,userservice用於使用令牌獲取問候訊息。 我還使用rxjs來處理http請求。這是乙個很棒的工具,我強烈建議花些時間好好學習它。 整個專案結構是這樣的: 準備身份驗證服務(authentication . service .ts) 該服務有三種方法——登入、登出和isuserloggedin。 登入方法向伺服器傳送post請求並獲取jwt令牌。 隱藏,複製code

login(username: string, password: string): observable,

).map((response: response) =>

else

});}

準備使用者服務(user . service .ts) 該服務只有乙個方法——getgreeting。 這裡重要的一點是這個方法訪問。/api/問候語終點,這是乙個安全的終點。為了訪問它,我們必須將承載令牌新增到請求頭中。 隱藏,複製code

}使用應用程式 要使用這個應用程式,首先要執行。net應用程式,然後執行angular應用程式。要執行angular應用程式,只需在命令提示符下進入angular專案資料夾,執行npm start。 angular應用程式會在使用者未登入時載入登入頁面。 如果我們放入在上一步中建立的使用者的憑據並單擊login按鈕,使用者將被登入並**到主頁。 本文**於:

Angular4 實現動態Form

在最近的專案中遇到動態form表單的問題,遇到很多編輯的地方,而且編輯的form表單很多內容,大概幾十個字段,而且有不同的型別,有文字框,也有下拉列表,有時間控制項,還有數值控制項等等,如果採用硬編碼的方式會有很多問題,量太大,容易漏資料,很容易出錯 於是正好找到angular有類似的例子,參考這裡...

Angular4的雙向資料繫結

最近在學angular4,因為angularjs中預設是雙向資料繫結,但是如果在比較複雜的頁面使用的話會引起效能問題,那是因為angularjs會在頁面儲存乙個所有資料繫結的列表,每當資料發生變化時,angularjs都會反覆檢視列表,以保證資料一致性。然後在angular4中預設是單向資料繫結。但...

Angular4 動態啟用禁用select

css disableselectpointer eventscss 屬性指定在什麼情況下 如果有 某個特定的圖形元素可以成為滑鼠事件的 target。tabindex 1 是搞掉鍵盤按tab 能觸發事件的情況 keyword values pointer events auto pointer e...