Laravelで生成したCookie情報をjQueryで取得する方法【JavaScript】

responseにcookieの付与

cookieのメソッドは以下の通りです。

cookie(‘name’, ‘value’, $minutes, $path, $domain, $secure, $httpOnly)

これをviewのメソッドに繋げることで、返却する際にcookie情報をセットすることができます。今回は管理者ホーム画面を想定してユーザー情報に格納されたapi_tokenを返却してみます。

// apiトークンを返却
return response()->view('admin.home')
        ->cookie('api_token', Auth::user()->api_token, 30);

名前に「api_token」、値に「Auth::user()->api_token」、cookieの有効時間を30分としました。実際にjsファイル側でクッキー情報の取得結果を確認してみましょう。

console.log($.cookie("api_token")); // undefined

これだけでは取得できませんね。問題はLaravel側にあります。

cookieの暗号化を解除する

Laravelでは生成したcookie情報を暗号化しているため、単純にcookieをセットするだけではLaravel内でしか使用できません。なので、暗号化を解除するための処理を加えます。

app/Http/Middleware/EncryptCookies.php

protected $except = [

        'api_token',

    ];

$exceptにcookieの名称を指定しておけば、セットしても暗号化されることはありません。もしEncryptCookies.phpのミドルウェアが有効になっていなければコメントアウトを解除しておきましょう。

app/Http/Kernel.php

/**
* The application's route middleware groups.
*
* @var array
*/
protected $middlewareGroups = [
     'web' => [
          \App\Http\Middleware\EncryptCookies::class,
     ];
];

これで暗号化されずにcookieへセットすることができます。jsファイルで取得結果を見てみましょう。 

console.log($.cookie("api_token")); // undefined

まだ駄目ですね。実はcookieの引数に問題があります。

jsファイルでcookieを取得するためには、controllerのviewに連結させたcookieに第7引数までをセットしなければなりません。

// apiトークンを返却
return response()->view('admin.home')
        ->cookie('api_token', Auth::user()->api_token, 30, null, null, false, false);

こうすることで、jsでも取得できるcookieをセットすることができます。

console.log($.cookie("api_token")); // vqZcNw7SkqhJxrfh*************

無事取得することができましたね。これでLaravel側での処理は完了です。

jquery.cookie.jsの読み込み

JavaScriptでもcookieの処理は可能ですが、全cookieを文字列で取得してしまうため加工が面倒です。今回は配列で簡単に受け取ることができるようにjQueryのjquery.cookie.jsというプラグインを使用します。

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.min.js"></script>

CDNを使用したくないのであれば、配布サイトでjsファイルをダウンロードしてresourcesに設置してください。 

cookieの取得

Laravelの処理でも少し登場しましたが、セットされたcookieを取得するには以下のように記述します。

$.cookie(name);

引数を指定しなければ、セットされているcookie情報すべてを配列で取得します。もし複数データを管理する場合はまとめて取得して、jsファイル内で展開するという方法もあります。

今回はapi_tokenにセットしたcookieを取得したいので、nameにはapi_tokenを指定します。 

var api_token = $.cookie("api_token");
console.log(api_token); // vqZcNw7SkqhJxrfh*************

// ajaxでhtmlのテンプレートを取得
var host = location.protocol + "//" + location.host;
var html = $.ajax({
        type: "GET",
        url: host + "/api/admin/html_template",
        async: false,
        headers: {
                Authorization: "Bearer " + $.cookie("api_token");
        },
        dataType: "html"
}).responseText;