配置好 renren-fast 腳手架,學習完 Spring MVC 架構後,我需要具體除錯 renren-fast 的介面,比如要新增某個介面。
什麼是前後端分離
執行 renren-fast 專案時,我們訪問 http://localhost:8080/renren-fast/ 的結果:
可以看到,介面給出了相應的回應,狀態碼 401 Unauthorized 代表客戶端錯誤,指的是由於缺乏目標資源要求的身份驗證憑證,傳送的請求未得到滿足。
執行 renren-fast-vue 專案時,我們訪問 http://localhost:8001/#/login :
接著使用Chrome自帶的網路工具:
點選 Headers 可以檢視 Request URL:
以此,我們確認訪問 後臺介面為:http://localhost:8080/renren-fast/captcha.jpg?uuid=11e75e91-f584-4e38-804b-d6776535eed9
同時還可以看到如下獲取頁面資訊的 headers:
請求的訪問介面是:http://localhost:8001/static/config/index.js
至此,我們便搞清楚了 renren-fast 前後端分離的業務是在說什麼,即:後端邏輯使用 renren-fast 實現,前端請求獲取的頁面資料,使用 renren-fast-vue 實現。
寫一個無需鑑權的GET介面
接下來我們基於 renren-fast 框架仿照 "/captcha.jpg" 寫第一個介面, "/captcha.jpg"介面程式碼:
/**
* 驗證碼
*/
@GetMapping("captcha.jpg")
public void captcha(HttpServletResponse response, String uuid)throws IOException {
response.setHeader("Cache-Control", "no-store, no-cache");
response.setContentType("image/jpeg");
//獲取圖片驗證碼
BufferedImage image = sysCaptchaService.getCaptcha(uuid);
ServletOutputStream out = response.getOutputStream();
ImageIO.write(image, "jpg", out);
IOUtils.closeQuietly(out);
}
我們寫一個 /testInterface 介面,在沒寫介面之前,我們訪問: http://localhost:8080/renren-fast/testInterface ,返回如下樣式:
我們編寫介面:
/**
* 測試介面
*/
@GetMapping("/testInterface")
public String testInterface() {
return "hello";
}
部署完之後訪問: http://localhost:8080/renren-fast/testInterface ,仍舊是展示:
那問題來了,我們這個介面部署的有問題嗎? 顯然是沒有問題的,只是一個簡單示例,接著我們在程式碼中搜尋 "{"msg":"![invalid token]","code":401}" ,可以發現有這麼一句:
這意味著即使我們部署了介面,如果token不存在,也依舊會返回 401,但我們這個介面不需要 token 鑑權,所以要配置無需鑑權的邏輯。
我們從哪裡可以知道怎麼配置如需鑑權呢? 還記得我們上面發現的一個無需鑑權的介面嗎?
http://localhost:8080/renren-fast/captcha.jpg?uuid=11e75e91-f584-4e38-804b-d6776535eed9
/captcha.jpg 這個介面無需登入,只要任意修改uuid就能獲取驗證碼,所以我們全域性搜尋 /captcha.jpg,可以發現有3處地方:
一處是配置 filterMap,也就是無需鑑權的介面,我們在同樣的地方加上我們自己的 testInterface 介面:
另一處是配置介面引數、描述、回包資料等,我們也簡單配置一下:
配置完畢後重新部署,重新訪問 http://localhost:8080/renren-fast/testInterface ,可以發現頁面展示:
介面部署成功!
除錯一個需要鑑權的GET介面
GET 介面可以簡單理解為從伺服器獲取資料,只是讀資料;而POST介面允許通過請求讓伺服器做一些事情:比如寫資料、刪資料等等。
當我們登入時,是向 http://localhost:8080/renren-fast/sys/login 傳送 POST 請求,我們來使用 Postman 模擬傳送 post請求,
首先,我們要獲取 驗證碼,我們請求: http://localhost:8080/renren-fast/captcha.jpg?uuid=11e75e93 ,獲取驗證碼:b676b
接著我們檢視 /sys/login 介面程式碼得知:
登入介面所必須的引數有:
- uuid
- captcha
- username
- password
使用Postman傳送Post請求成功:
我們獲取 token 為 5d68f7779618adba8a1fb37df4bbe8e6 ,那是不是意味著我們可以通過 token 訪問那些有許可權的介面了呢?我們試試:
我們使用 Postman 傳送 GET 請求: http://localhost:8080/renren-fast/sys/menu/nav?t=1647101933260&token=5d68f7779618adba8a1fb37df4bbe8e6
果然回包成功了:
小結
通過本篇文章的學習,我們明確瞭如下的內容:
- renren-fast 前後端分離的設計理念
- 學會配置一個無需鑑權的簡單介面
- 通過postman除錯了鑑權post邏輯和get邏輯
至此我們可以自由編寫 鑑權介面 和 非鑑權介面。
文章首發:問我社群