web-dev-qa-db-ja.com

AXIOSを使用してCookieにJWTを保存する方法は？

API呼び出しを処理するために、私のReactアプリケーションとAXIOSでJWTを使用しています。私はブラウザが更新されるたびに再びログインするようにリダイレクトされていないように、クッキーにトークンを保存する方法を探しています。

これがAxiosと私のログインコールのための私のセットアップです：

_let authToken = null; 

const axios = axiosAPI.create({
    baseURL: baseURL
});

// User login
export const loginUser = (data) => {
    return new Promise((resolve, reject) => {
        axios.post(`${baseURL}/jwt-auth/v1/token`, data)
            .then((res) => {
                authToken = res.data.token;

                // Adds the token to the header
                axios.defaults.headers.common.Authorization = `Bearer ${authToken}`;

                resolve(res.data);
            })
            .catch((error) => {
                reject(error);
            });
    });
};
_

私はCookieを設定しているべき場所とそれを設定する方法は確かではありませんか？

編集：

JS-Cookieを使ってコードを書き直して、コメントのように見えます。

_import axiosAPI from 'axios';
import Cookies from 'js-cookie';

let authToken = null;

const axios = axiosAPI.create({
    baseURL: `${baseURL}`
});

// Check if user is logged in.
(function () {
    if (Cookies.get('token') === null) {
        // This means that there's no JWT and no user is logged in.
        axios.defaults.headers.common.Authorization = null;
    } else {
        // This means that there's a JWT so someone must be logged in.
        axios.defaults.headers.common.Authorization = `Bearer ${authToken}`;
    }
}());

// User login
export const loginUser = (data) => {
    return new Promise((resolve, reject) => {
        axios.post(`${baseURL}/jwt-auth/v1/token`, data)
            .then((res) => {
                authToken = res.data.token;

                Cookies.setToken('token', authToken);

                // Adds the token to the header
                axios.defaults.headers.common.Authorization = `Bearer ${authToken}`;

                resolve(res.data);
            })
            .catch((error) => {
                reject(error);
            });
    });
};
_

しかし、これは私がまったくログインするのを防ぎ、そして私はエラー「間違った数のセグメント」を得ます。これが機能していないのはなぜですか？

javascriptreactjscookiesjwtaxios
6
G. Cox

あなたが持っている問題を解決するためにここにかかることができるさまざまなオプションがいくつかあります。これは、ページを更新した後でも使用できるように、JWTを保存することができます。

  1. localStorageまたはSessionStorageを保存して、axios.postコールバックで（ - === - ）ページが更新された後もアクセスできるようになります。どのストレージがあなたのアプリに最も適しているかを学ぶために、 この を参照してください。

    それを短くするために、localStorageに格納されている値は、明示的に削除するまで持続します（JSコードを介してこれを行うことができます）。また、ブラウザで開いているタブであのドメインにアクセスできるようになります（まだ新しいタブでログインしたい場合は非常に便利です）。一方、SessionStorageに格納されている値は、タブが閉じるまで生きるだけです。タブでも共有することはできません。

    これを使用すると、次のようなものです。
    [。] localStorage.setItem("JWT", authToken);またはsessionStorage.setItem("JWT", authToken);authToken = res.data.token;の後のコールバックの_

    それでは、JWTを保存した場所があるので、アプリがページのロード（または更新）の初期化時にJWTがストレージに存在するかどうかを確認してください。 LocalStorageを使用する方法の基本的な例です。

// This should be one of the first things that run on your app.

const axios = axiosAPI.create({
    baseURL: baseURL
});

// Check if user is logged in.
(function() { 
  let authToken = localStorage.getItem("JWT");
  if (authToken === null) {
      // This means that there ISN'T JWT and no user is logged in.
      axios.defaults.headers.common.Authorization = null;
  } else {
      // This means that there IS a JWT so someone must be logged in.
      axios.defaults.headers.common.Authorization = `Bearer ${authToken}`;
  }
})();

これにより、以前にログインした場合は、ユーザーがページロード時にログアウトされていないことを確認します。

  1. クライアントサイドCookieにjwtを保存します。ここでは、認証がすべてJWTの周りに構築されていることを考えると、サーバーサイドのクッキーを使用していないため、Cookieはストレージメカニズムとして使用されています。上記と同じコードパターンに従うことができますが、代わりにdocument.cookie = "key=value"を使用してcookieとdocument.cookieを使用して表示しますallcookies。

    この2番目の方法は、すべてのクッキーを介して解析され、適切なcookie path属性を確実に設定し、クッキーだけが必要なエンドポイントのみを送信するようにしてください（そうでなければあなたがただあなただけのものとしているだけ）、それはあなたがそれほど一般的ではありません。不要なオーバーヘッドを作成します。このオプションを実行した場合は、あなたがあなたのニーズに合うようにあなたのクッキーを作成するのを助けるために この を読んでください。 クライアントサイドのクッキーを操作するのに役立つように、 js-cookie のようなヘルパーJSライブラリを使用することもできます。

さらに、 https://stackoverflow.com/a/40376819/11048825 を読み取ると、これら2つのオプションにさらにダイビングし、それぞれに関連付けられている長所と短所を理解します。

5
Pas