railsサーバーから返したアクセストークンをaxiosやjqueryでヘッダーに含める上でのベストプラクティス

環境：
rails6
jQuery
erb

devise-token-auth等のtoken認証を用いると、サーバーのresponse header内にアクセストークンが返ってくると思います。
このサーバーから返ってきたaccess-tokenを用いてアプリ内で、
次にページ遷移する時などにtoken検証を行っていくと思うのですが、その際のリクエスト毎に以下の様にtokenをヘッダーに含める必要性があると思います。

//jquery
$.ajax( {
        url: '/test',
        type: 'PUT',
        headers: {
            'X-HTTP-Method-Override': 'PUT',
            'Content-Type': 'application/json',
            'access-token': 'wwwww',
            'token-type': 'Bearer',
            'client': 'xxxxx',
            'expiry': 'yyyyy',
            'uid': 'zzzzz'
        },
        dataType: 'json',
        data: '{"test": "テスト"}',
    } )
...

この際クライアント側(リクエストヘッダー)にaccess-tokenを渡す上でどの様な方法がベストかか教えて頂けると幸いです。
例えばcontrollerで
@token = headers['acccess-token']の様な形でインスタンス変数に格納し、
hiddenタグ内のvalueに入れた後jQueryでDOM取得する

#token.html.erb
<%= form.hidden_field :access-token ,:id => token, :value => @token %>

#jquery
var token = $('#token').val();
...

headers: {
...
'access-token': token
...
}

ことを考えたのですが、hiddenであろうとaccess tokenをこの様に表示させることが非常に悪手な気がしています。
どの様にしてrailsサーバーからクライアント側(リクエストヘッダ)にトークンを渡してあげるべきでしょうか？
また場合によってはjqueryの代わりにaxiosの使用も検討しています。
よろしくお願いします。