teratail header banner
teratail header banner
質問するログイン新規登録

質問編集履歴

3

試したことをさらに追記

2021/06/29 22:43

投稿

kiyomasa
kiyomasa

スコア40

title CHANGED
File without changes
body CHANGED
@@ -7,6 +7,7 @@
7
7
  (ログイン時にはsession[:user_id]がしっかり入るのですが、logged_in?の時に消えてしまう。)
8
8
 
9
9
  なぜsession[:user_id]がnilになってしまうのでしょうか?
10
+ (cookieは同じ値で飛んでいる気がします)
10
11
 
11
12
  ##試したこと
12
13
 
@@ -26,10 +27,16 @@
26
27
  => nil
27
28
  [3] pry(#<Api::V1::SessionsController>)> @current_user
28
29
  => nil
29
- [4] pry(#<Api::V1::SessionsController>)> @user
30
- => nil
31
30
  ```
32
31
 
32
+ ##6/30追記
33
+ デバックツールで確認したところsessions_controller.application_controller共にメソッド自体は機能している模様ですが、
34
+ session[:user_id]はnilのままです。
35
+
36
+ cookieも同じ値が行っているのですが、sessionがうまくいきません。
37
+
38
+
39
+
33
40
  ##関連コード
34
41
 
35
42
 
@@ -136,6 +143,7 @@
136
143
 
137
144
  ##追加のコード
138
145
 
146
+
139
147
  フロントエンド ログイン部のuseAuth
140
148
 
141
149
  ```
@@ -251,4 +259,23 @@
251
259
  ![イメージ説明](c1cd86fbf42fedea1b28fdd13e727949.png)
252
260
 
253
261
  ![イメージ説明](e6b8922e25ec4771a34f60b4853af2b0.png)
254
- ※同一cookie
262
+ ※同一cookie
263
+
264
+ cors.rb
265
+
266
+ ```
267
+
268
+ Rails.application.config.middleware.insert_before 0, Rack::Cors do
269
+ # ローカル環境
270
+ allow do
271
+ origins "http://localhost:3001"
272
+
273
+ resource "*",
274
+ headers: :any,
275
+ methods: [:get, :post, :put, :patch, :delete, :options, :head],
276
+ credentials: true
277
+ end
278
+ end
279
+ ```
280
+
281
+ ひたすらに詰まっております、、、わかる方がいらっしゃればご回答いただけると嬉しいです。。

2

sessions_store.rbを変更追加

2021/06/29 22:43

投稿

kiyomasa
kiyomasa

スコア40

title CHANGED
File without changes
body CHANGED
@@ -236,4 +236,19 @@
236
236
  ![イメージ説明](21517a56267d07f33dce01bc70d359c5.png)
237
237
 
238
238
  logged_inメソッド実行のブラウザのネットワーク部
239
- ![イメージ説明](e08e1627c624bea3d155aa4e90402bc7.png)
239
+ ![イメージ説明](e08e1627c624bea3d155aa4e90402bc7.png)
240
+
241
+ sessions_store.rbでフロントエンドのドメインを変更し、cookieの保持は可能になりました。
242
+
243
+ ```
244
+ if Rails.env === 'production'
245
+ Rails.application.config.session_store :cookie_store, key: '_cooklog', domain: 'localhost3001'
246
+ else
247
+ Rails.application.config.session_store :cookie_store, key: '_cooklog'
248
+ end
249
+ ```
250
+
251
+ ![イメージ説明](c1cd86fbf42fedea1b28fdd13e727949.png)
252
+
253
+ ![イメージ説明](e6b8922e25ec4771a34f60b4853af2b0.png)
254
+ ※同一cookie

1

railsとの繋がりの部分の記載を追加

2021/06/27 01:08

投稿

kiyomasa
kiyomasa

スコア40

title CHANGED
File without changes
body CHANGED
@@ -132,4 +132,108 @@
132
132
 
133
133
  ###前回の質問
134
134
 
135
- https://teratail.com/questions/345569
135
+ https://teratail.com/questions/345569
136
+
137
+ ##追加のコード
138
+
139
+ フロントエンド ログイン部のuseAuth
140
+
141
+ ```
142
+ /* eslint-disable react-hooks/exhaustive-deps */
143
+ import { useCallback, useState } from "react";
144
+ import axios from "axios";
145
+ import { useHistory } from "react-router-dom";
146
+
147
+ import { useMessage } from "./useMessege";
148
+ import { useLoginUser } from "./useLoginUser"
149
+
150
+ import { loginURL } from '../urls/index'
151
+
152
+ export const useAuth = () => {
153
+ const history = useHistory();
154
+ const { showMessage } = useMessage();
155
+ const { setLoginUser } = useLoginUser();
156
+
157
+ const [loading, setLoading] = useState(false);
158
+
159
+
160
+ const login = useCallback((data) => {
161
+ setLoading(true);
162
+ //ローディングアイコンをtrueに
163
+ axios.post(loginURL,
164
+ {
165
+ user: {
166
+ email: data.email,
167
+ password: data.password,
168
+ }
169
+ },
170
+ { withCredentials: true }
171
+ ).then(response => {
172
+ if (response.data.logged_in) {
173
+ // contextにログインユーザーの情報を保存
174
+ setLoginUser(response.data)
175
+ // handleSuccessfulAuth(response.data);
176
+ showMessage({ title: "ログインしました", status: "success" });
177
+ history.push("/mypage");
178
+ // apiを叩き成功したらメソッドが起動し、data(userのデータ)をmypageに渡してページ遷移する
179
+ }
180
+ // 認証できなかった時のエラー
181
+ else if (response.data.status === 401) {
182
+ showMessage({ title: `${response.data.errors}`, status: "error" });
183
+ }
184
+ // うまくpostできなかった時のエラー
185
+ }).catch((e) => {
186
+ showMessage({ title: "認証できませんでした。再度リロードなどを行いやり直して下さい", status: "error" });
187
+ setLoading(false);
188
+ })
189
+ }, [history, showMessage, setLoginUser]);
190
+
191
+ return { login, loading };
192
+ };
193
+ ```
194
+
195
+ ログインをチェックするuseAuthCheck
196
+ ```
197
+ /* eslint-disable react-hooks/exhaustive-deps */
198
+ import { useCallback } from "react"
199
+ import axios from "axios";
200
+ import { useHistory } from "react-router-dom";
201
+
202
+ import { useMessage } from "./useMessege";
203
+ import { useLoginUser } from "./useLoginUser"
204
+ import { logged_inURL } from '../urls/index'
205
+
206
+ export const useAuthCheck = () => {
207
+ const { setLoginUser } = useLoginUser();
208
+ const history = useHistory();
209
+ const { showMessage } = useMessage();
210
+
211
+
212
+ const CheckAuth = useCallback(() => {
213
+ axios
214
+ .get(logged_inURL,{ withCredentials: true })
215
+ .then(response => {
216
+ if (response.data.logged_in === true) {
217
+ setLoginUser(response.data.user)
218
+ }
219
+ // 認証できなかった時のエラー
220
+ else if (response.data.logged_in === false) {
221
+ showMessage({ title: `${response.data.errors}`, status: "error" });
222
+ history.push("/login");
223
+ console.log(response.data.session)
224
+ console.log(response.data.user)
225
+ }
226
+ // うまくpostできなかった時のエラー
227
+ }).catch((e) => {
228
+ showMessage({ title: "再度送信して下さい", status: "error" });
229
+ })
230
+ }, []);
231
+ return { CheckAuth };
232
+ }
233
+ ```
234
+
235
+ loginメソッド実行のブラウザのネットワーク
236
+ ![イメージ説明](21517a56267d07f33dce01bc70d359c5.png)
237
+
238
+ logged_inメソッド実行のブラウザのネットワーク部
239
+ ![イメージ説明](e08e1627c624bea3d155aa4e90402bc7.png)