JWTで発行したTokenをCookieに保存して使用する

複数の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を使っても問題ありません。

コメント