[解決済み] reactでCookieを設定するにはどうしたらいいですか?
2022-03-12 17:45:51
質問
元々、以下のようなajaxでcookieを設定しています。
function setCookieAjax(){
$.ajax({
url: `${Web_Servlet}/setCookie`,
contentType: 'application/x-www-form-urlencoded;charset=utf-8',
headers: { 'Access-Control-Allow-Origin': '*',
'username': getCookie("username"),
'session': getCookie("session")
},
type: 'GET',
success: function(response){
setCookie("username", response.name, 30);
setCookie("session", response.session, 30);}
})
}
function setCookie(cname, cvalue, minutes) {
var d = new Date();
d.setTime(d.getTime() + (minutes*60*1000));
var expires = "expires="+ d.toUTCString();
document.cookie = cname + "=" + cvalue + "; " + expires;
}
export const getUserName = (component) => {
setCookieAjax()
$.ajax({
url: `${Web_Servlet}/displayHeaderUserName`,
contentType: 'application/x-www-form-urlencoded;charset=utf-8',
headers: { 'Access-Control-Allow-Origin': '*',
'username': getCookie("username"),
'session': getCookie("session")
},
type: 'GET',
success: function(response){
component.setState({
usernameDisplay: response.message
})
}.bind(component)
})
}
さて、サーブレットのcookie追加機能を使ってcookieを設定したい。しかし、どうすれば目的を達成できるのかわかりません。
Cookie loginCookie = new Cookie("user",user); //setting cookie to expiry in 30 mins
loginCookie.setMaxAge(30*60);
loginCookie.setDomain("localhost:4480");
loginCookie.setPath("/");
response.addCookie(loginCookie);
Cookieのtimelimitを拡張するために、react側でCookieのセッション時間を受け取るには、何を書けばいいのでしょうか?
どのように解決するのですか?
以前からあった機能は
react-cookie
npm パッケージに移動しました。
universal-cookie
. の関連する例です。
ユニバーサルクッキーレポジトリ
になりました。
import Cookies from 'universal-cookie';
const cookies = new Cookies();
cookies.set('myCat', 'Pacman', { path: '/' });
console.log(cookies.get('myCat')); // Pacman
関連
-
[解決済み] Reactルータを使ったプログラムによるナビゲーション
-
[解決済み] React JSX内のループ
-
[解決済み] jQueryでクッキーを設定/解除するにはどうすればよいですか?
-
[解決済み] Reactのこの3つの点は何をするところなのでしょうか?
-
[解決済み] PHPのセッションを30分後に失効させるにはどうしたらいいですか?
-
[解決済み] React NativeとReactの違いは何ですか?
-
[解決済み] setStateを呼び出さずにReactコンポーネントを強制的に再レンダリングすることは可能ですか?
-
[解決済み] Reactコンポーネントに条件付きで属性を追加するにはどうすればよいですか?
-
[解決済み] サブドメインとドメイン間でCookieを共有する
-
[解決済み] クロスオリジンリクエストにCookieを設定する
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
[解決済み】<Router>の外側で<Link>を使用してはならない
-
[解決済み] formcontrollabel - material-ui | Reactのデフォルトのtypography classを変更するには?
-
[解決済み] react nativeで関数だらけのヘルパーファイルを作成する方法は?
-
[解決済み] React の open mailto E-Mail クライアントの onClick で textarea から本文を取得する。
-
[解決済み] ReactjsのEsLintの "react / jsx-props-no-spreading "エラーを無効化する。
-
[解決済み] React - _this2.SetStateは関数ではありません。
-
[解決済み] validateDOMNesting警告React
-
[解決済み] アクシオスは定義されていません
-
[解決済み] reactのuseStateフックでコールバックを使う方法 [重複]。
-
[解決済み] Reactでグローバル変数を宣言する方法とは?