複数のWeb APIを使うWebアプリの場合、ユーザー認証にTokenを使うのが便利です。
サーバーでcookieにトークンを保存して返す
cookieにjwtというキーでacessTokenを保存します。
res.cookie("jwt", accessToken);
フロントエンド側での対応
普通にJavascriptで
let TokenInCookie = document.cookie.replace(/(?:(?:^|.*;\s*)jwt\s*\=\s*([^;]*).*$)|^.*$/, "$1");
でcookieからjwt=XXXXXXX;のXXXXXXの部分を抜き出せます。
if (TokenInCookie) {
headers['Authorization'] ='JWT '+TokenInCookie;
}
抜き出したTokenをheaderのAuthorizationに書き込みリクエストします。
JQueryを使うと
jquery.cookie.jsをダウンロードする必要があります。
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.js"></script>
CDNからダウンロードするのが簡単ですが、状況に応じてください。
let TokenInCookie = $.cookie("jwt")
フロントエンドがReactの場合
react-cookieというlibraryを使うという方法もありますが、DOM操作を行うわけではないので、上で紹介したjavascriptで対応してしまうのでも良いと思います。
DOM操作を行うと、Reactと干渉してしまいますがこの場合はjavascriptを使っても問題ありません。
ログアウトはどうする?
トークンを使用した認証の場合、ログアウトするというのはクッキーからjwt=XXXXXXX;を削除するということです。トークンがなければ、APIとアクセスできません。
普通にJavascriptで
function logout(){
document.cookie="jwt=;";
}
jwt=XXXXXX; を jwt=;に変更します。
JQueryを使うと
function logout(){
$.removeCookie("jwt");
}
jwtというキー自体がクッキーから削除されます。
フロントエンドがReactの場合
react-cookieというlibraryを使うという方法もありますが、DOM操作を行うわけではないので、上で紹介したjavascriptで対応してしまうのでも良いと思います。
DOM操作を行うと、Reactと干渉してしまいますがこの場合はjavascriptを使っても問題ありません。
コメント