質問編集履歴
1
リクエスト時のヘッダー内容と、リクエストを送るフロントエンドのaxiosを追加しました
test
CHANGED
|
File without changes
|
test
CHANGED
|
@@ -114,4 +114,73 @@
|
|
|
114
114
|
|
|
115
115
|
思いつく原因がもうなく、他アドバイスなどいただけると幸いです。
|
|
116
116
|
|
|
117
|
+
### 追記
|
|
118
|
+
リクエスト時のヘッダー内容
|
|
117
119
|
|
|
120
|
+
```
|
|
121
|
+
Provisional headers are shown
|
|
122
|
+
Learn more
|
|
123
|
+
Accept: application/json, text/plain, */*
|
|
124
|
+
Content-Type: application/json
|
|
125
|
+
Referer: https://フロントアプリ名/
|
|
126
|
+
sec-ch-ua: " Not;A Brand";v="99", "Google Chrome";v="97", "Chromium";v="97"
|
|
127
|
+
sec-ch-ua-mobile: ?1
|
|
128
|
+
sec-ch-ua-platform: "Android"
|
|
129
|
+
User-Agent: Mozilla/5.0 (Linux; Android 6.0; Nexus 5 Build/MRA58N) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/97.0.4692.71 Mobile Safari/537.36
|
|
130
|
+
```
|
|
131
|
+
|
|
132
|
+
フロント側のaxios通信部分
|
|
133
|
+
|
|
134
|
+
```
|
|
135
|
+
/* eslint-disable react-hooks/exhaustive-deps */
|
|
136
|
+
import { useCallback, useState } from "react";
|
|
137
|
+
import axios from "axios";
|
|
138
|
+
import { useHistory } from "react-router-dom";
|
|
139
|
+
|
|
140
|
+
import { useMessage } from "./useMessege";
|
|
141
|
+
import { useLoginUser } from "./useLoginUser"
|
|
142
|
+
|
|
143
|
+
import { loginURL } from '../urls/index'
|
|
144
|
+
|
|
145
|
+
export const useAuth = () => {
|
|
146
|
+
const history = useHistory();
|
|
147
|
+
const { showMessage } = useMessage();
|
|
148
|
+
const { setLoginUser } = useLoginUser();
|
|
149
|
+
|
|
150
|
+
const [loading, setLoading] = useState(false);
|
|
151
|
+
|
|
152
|
+
const login = useCallback((data) => {
|
|
153
|
+
setLoading(true);
|
|
154
|
+
//ローディングアイコンをtrueに
|
|
155
|
+
axios.post(loginURL,
|
|
156
|
+
{
|
|
157
|
+
user: {
|
|
158
|
+
email: data.email,
|
|
159
|
+
password: data.password,
|
|
160
|
+
}
|
|
161
|
+
},
|
|
162
|
+
{ withCredentials: true }
|
|
163
|
+
).then(response => {
|
|
164
|
+
if (response.data.logged_in) {
|
|
165
|
+
setLoginUser(response.data)
|
|
166
|
+
showMessage({ title: "ログインしました", status: "success" });
|
|
167
|
+
const user_id = response.data.user.id
|
|
168
|
+
history.push(`/users/${user_id}`);
|
|
169
|
+
}
|
|
170
|
+
// 認証できなかった時のエラー
|
|
171
|
+
else if (response.data.status === 401) {
|
|
172
|
+
showMessage({ title: `${response.data.errors}`, status: "error" });
|
|
173
|
+
}
|
|
174
|
+
// うまくpostできなかった時のエラー
|
|
175
|
+
}).catch((e) => {
|
|
176
|
+
showMessage({ title: "認証できませんでした。再度リロードなどを行いやり直して下さい", status: "error" });
|
|
177
|
+
setLoading(false);
|
|
178
|
+
})
|
|
179
|
+
}, [history, showMessage, setLoginUser]);
|
|
180
|
+
|
|
181
|
+
return { login, loading };
|
|
182
|
+
};
|
|
183
|
+
|
|
184
|
+
```
|
|
185
|
+
|
|
186
|
+
|