由于 layuiAdmin 接管了視圖層,所以不必避免可能會與服務端分開部署,這時你有必要了解一下 layuiAdmin 默認提供的:從 登錄 到 接口鑒權,再到 注銷 的整個流程。
### 登錄攔截器
進入登入頁面登入成功后,會在 localStorage 的本地表中寫入一個字段。如: access_token (名稱可以在 config.js 自定義)。攔截器判斷沒有 access_token 時,則會跳轉到登入頁。盡管可以通過偽造一個假的 access_token 繞過視圖層的攔截,但在請求接口時,會自動帶上 access_token,服務端應再次做一層校驗。
### 流程
1、打開 config.js ,將 interceptor 參數設置為 true(該參數為 1.0.0-beta6 開始新增)。那么,當其未檢查到 access_token 值時,會強制跳轉到登錄頁面,以獲取 access_token。
2、打開登錄對應的視圖文件 views/user/login.html,在代碼最下面,你將看到一段已經寫好的代碼,你需要的是將接口地址改為服務端的真實接口,并返回 access_token 值。
3、layuiAdmin 會將服務端返回的 access_token 值進行本地存儲,這時你會發現 layuiAdmin 不再強制跳轉到登錄頁面。并在后面每次請求服務端接口時,都會自動在參數和 Request Headers 中帶上 access_token,以便服務端進行鑒權。
4、若鑒權成功,順利返回數據;若鑒權失敗,服務端的 code 應返回 1001(可在 config.js 自定義) , layuiAdmin 將會自動清空本地無效 token 并跳轉到登入頁。
5、退出登錄:重新打開 controller/common.js,搜索 logout,配上注銷接口即可。
如果是在其它場景請求的接口,如:table.render(),那么你需要獲取本地存儲的 token 賦值給接口參數,如下:
//設置全局 table 實例的 token(這樣一來,所有 table 實例均會有效)
table.set({
headers: { //通過 request 頭傳遞
access_token: layui.data('layuiAdmin').access_token
}
,where: { //通過參數傳遞
access_token: layui.data('layuiAdmin').access_token
}
});
//設置單個 table 實例的 token
table.render({
elem: '#xxxx'
,url: 'url'
,where: {
access_token: layui.data('layuiAdmin').access_token
}
//,headers: {}
});
事實上,layuiAdmin 的所有 Ajax 請求都是采用 admin.req(options),它會自動傳遞 access_token,因此推薦你在 JS 執行 Ajax 請求時直接使用它。其中參數 options 和 $.ajax(options) 的參數完全一樣。
### 接口鑒權
我們推薦服務端遵循 JWT(JSON Web Token) 標準進行鑒權。對 JWT 不甚了解的同學,可以去搜索一些相關資料,會極大地增加應用的可擴展性。當然,你也可以直接采用傳統的 cookie / session 機制。