今天我要從前端的SPA，透過axios呼叫某個後端的API
而後端的API的驗證機制使用JWT Token
一般來說，這個Token值則會在登入時放入Client的Cookie當中
每次呼叫ajax時，將JWT的Token值塞入在Request的Header的Authorization
可是因為安全性的問題，該網頁的Cookie有設定Httponly
所以無法透過Javascript從Cookie取得Token，無法將Token塞入Request的Header
想請教這個問題在C# Web API 與 Laravel 等後端API 通常該怎麼實作？
已邀請的邦友 {{ invite_list.length }}/5
這個 Laravel 的做法, 是不是你要的情境:
HttpOnly cookie is a more secure place to put the token since no js code can access it. Fortunately, Laravel JW Auth library let you do that out of the box.
是這個情境沒有錯
不過我剛才仔細看了一下內文
我有看到一段Login的驗證Controller程式碼，會把登入後的Token設定在Cookie：
public function login(LoginRequest $request): JsonResponse
{
return (new AuthResource(auth()->user()))
->response()
->withCookie(
'token',
auth()->getToken()->get(),
config('jwt.ttl'),
'/'
);
}
那麼每當呼叫需要驗證JWT的API路由時
是不是不需要在Request的Header存放Token
Laravel會有什麼機制自動從Request取得Client端的Cookie驗證JWT？
因為其他的方法都是跟防CSRF的Token有關，沒看到存取JWT的程式碼
Cookie 是存在 Browser 裡面, 每一筆瀏覽 Browser 都會主動從 Cookie 內 將 JWT Token 取出, 帶進 Header 裡面送給 Server, 你不需要自己用 JS 去送.... 請參考:
Day 19 - 二周目 - 帳密認証與JWT (JSON Web Token)傳遞
最下面「回傳JWT」那節的說明....
所以無法透過Javascript從Cookie取得Token，無法將Token塞入Request的Header
那就不要放 header 阿
看你用 cookie 或是 payload 帶到後端都可以
也不一定要放 cookie
localStorage 也可以
看你的需求
因為安全性問題，不會把Token放在localStorage
Cookie本身在前端已經設定HttpOnly所以也不可能從前端帶到後端
Laravel 跟 C# Web API 有設定要驗證JWT的 Route，都要在Header放Token才能通過JWT驗證
可是如果不能放在LocalStorage，也不能從Cookie取得放在Header
是不是就無法讓後端的API通過JWT驗證
如果是希望 token 不被其他 javascript 存取
目前我想得到的方法是利用下面兩點：
登入後的第一個頁面
<body>
<!--下面這兩行放 body 最前面，注意 axios4api.js 不要加上 defer 或 async-->
<input id='authToken' type='hidden' value='auth_token'>
<script src="axios4api.js"></script>
<!--後面放其他程式碼-->
</body>
axios4api.js
let axios4api=(()=>{
let ele=document.querySelector('#authToken');
let token=ele.value;
ele.parentElement.removeChild(ele);
ele=null;
let myAxios=false;
function wrap() {
let params=Array.from(arguments);
return getMyAxios().apply(null, params);
}
let methods=['request', 'get', 'delete', 'head', 'options', 'post', 'put', 'patch', 'getUri'];
methods.forEach((method)=>{
wrap[method]=function() {
let params=Array.from(arguments);
return getMyAxios()[method].apply(null, params);
}
});
return wrap;
function getMyAxios() {
if(!myAxios) {
myAxios=axios.create({
headers: {'Authorization': token}
});
}
return myAxios;
}
})();
這樣後面使用時，把 axios 改成 axios4api 就可以夾帶 token 了
iThome鐵人賽
看影片追技術