前後端分離 WebAPI Vue開發身份認證

前後端分離：webapi+vue開發——遠端資料請求axios

前後端分離：webapi+vue開發——跨域設定

前後端分離：webapi+vue開發——身份認證

儲存使用者身份可以用cache記憶體或者redis，本文實現用的是redis。

1、在登入頁或者首頁頁面開啟後，先獲取token使用者身份

/// /// 獲取token
}

2、客戶端新增驗證

客戶端獲取token值並儲存本地cookie，並設定1個小時的有效期，之後頁面載入時都判斷是否存在token，存在則更新cookie的有效期，不存在則跳轉到首頁，然後在首頁獲取token。上面的操作最好是放在乙個js公共檔案中，在每個頁面都引用，涉及到敏感資訊的遠端請求時，都在請求頭中攜帶這個token。

js**如下：

//使用者登入狀態檢查，未登入轉首頁
var token = getcookie('token');
if (!token && location.href != '') 
if(token)

3、在服務端儲存使用者身份資訊

使用者進行登入操作時，將token資料也傳送到服務端，使用者登入成功後，以token以鍵，把使用者資訊儲存在cache記憶體或者redis中，同時設定使用者資訊的有效期，注意：redis中資料的有效期要與客戶端cookie的有效期同步或者時間略長。登入驗證碼的功能此處不再實現

/// /// 登入介面
; }}

4、服務端驗證token的有效性

之後的請求，涉及到資料的操作時，每次請求都需要驗證請求的合法性，即驗證token的有效性。在webapi中，新增乙個基類basecontroller，需要驗證使用者身份的controller都繼承基類，在基類中新增http請求的header驗證，如果header中存在token，並且redis中也有該token的使用者資訊，則進行後續操作，如果不存在，返回錯誤狀態，前端跳轉重新登入的頁面。

基類basecontroller如下：

public class basecontroller : apicontroller
} }}

前後端分離 WebAPI Vue開發 身份認證

前後端分離

前後端分離

前後端分離

相關推薦

前後端分離 WebAPI Vue開發身份認證