[React] fromからの値の取得方法について
Q&A
Closed
解決したいこと
バックエンドにDjango REST Framework、フロントエンドにReactを用いてWebアプリケーションを作成しています。DRFはAPIとして使用しています。
現在困っていることは、JWTを用いた会員登録機能の実装で、React側での認証の仕方やトークンの取得方法が分かりません。
＜できていること＞
・カスタムユーザーモデルの作成（email,passwordで認証）
・DRF側でsimple-jwtを用いて、アクセストークン及びリフレッシュトークンの表示
（エンドポイント： http://localhost:8000/api/v1/auth/jwt/create）
（ターミナルやModHeaderなどを使えばDRF側のみでは認証がうまくいく）
・React側でemail,passwordを手動で加えたPOSTメソッドでは、トークンが返ってくる
＜解決したいこと＞
・React側でAPIエンドポイントからのデータの取得・処理を行うために以下の手順を考えていますが、①が上手くいきません。
（想定している処理の流れ）
①Formでユーザーに入力してもらったemail、passwordを http://localhost:8000/api/v1/auth/jwt/create に送信し、トークンを取得
②取得したトークンをヘッダーにセットしてAPIに接続
＜開発環境＞
MacOS BigSur -- 11.2.1
発生している問題・エラー
Loginページを開くだけで以下の画像の様なエラーが出てしまいます。
コンソールにも何も表示されず、困っています。
TypeError: path.split is not a function
該当するソースコード
[React]Login.js
import React, { useState, useEffect, useRef } from 'react';
import { useCookies } from 'react-cookie';
import axios from 'axios';
import { useForm } from "react-hook-form";
import { useHistory } from 'react-router-dom';
import { apiURL } from './Default';
const Login = (props) => {
const history = useHistory();
const [cookies, setCookie] = useCookies();
const { register, handleSubmit, watch, errors } = useForm();
const getJwt = async (data) =>{
console.log(data)
await axios.post(`${apiURL}auth/jwt/create/`,
{
email:data.email,
password:data.password,
},
)
.then(function (response) {
console.log(response.data.access)
setCookie('accesstoken', response.data.access, { path: '/' });
setCookie('refreshtoken', response.data.refresh, { path: '/' });
history.push('/');
})
};
return (
<div>
<p>ログインページ</p>
<form onSubmit={handleSubmit(getJwt)}>
<input className='form-control' name="email" ref={register} />
<input className='form-control' name="password" type="password" ref={register({ required: true })} />
<input className='btn btn-secondary' type="submit" value="ログイン" />
</form>
</div>
);
}
export default Login;
自分で試したこと
- TypeError: path.split is not a functionについていろいろ調べましたが、何が原因なのか分かりませんでした。
- Formあたりの問題かと考え、Formを使わずに手動でemail,passwordを加えてaxiosのPOSTを試したところ、上手くトークンが返ってきました。
前回と同じ様な質問で大変恐縮なのですが、どなたか改善策を教えていただけないでしょうか？
よろしくお願いいたします。
0
