Project|会員脱退機能の実施

会員脱退機能の実現

会員脱退機能を実現しました.今回は、モデールウィンドウに通知を出して会員の脱退を誘導する方法を使用しました.

1.会員脱退機能の実現

まず会員脱退の機能的実施を行った.メンバー終了ハンドルを作成し、axiosを介してサーバと通信し、終了ボタンをクリックしたときにdb上のユーザー情報を削除するロジックを構成します.

	const signoutSubmitHandler = () => {
		if (!accessToken) {
			return
		}
		axios
			.delete('https://localhost:4000/users', {
				headers: { authorization: `Bearer ${accessToken}` },
				'Content-Type': 'application/json',
			})
			.then(res => {
		        localStorage.removeItem('accessToken')
				localStorage.removeItem('email')
				alert('회원 탈퇴가 완료되었습니다.')
				// openAlertHandler();
				window.location.replace('/')
			})
			.catch(err => {
				alert('잘못된 요청입니다')
				// openWarningAlertHandler();
				console.log('회원탈퇴실패', err)
			})

まず、プレイヤーがコインを持っていなければ、返させ、コインがあれば会員脱退ロジックが起動します.axiosのdeleteメソッドは、サーバが指定したアドレスにリクエストを送信し、タイトルにタグを追加します.その後、リクエストが正常にコミットされた場合、removeItemによってローカルストレージのタグと電子メール値が削除されます.一時的に削除に成功した場合、alertウィンドウを使用してメンバーが正常に終了したかどうかをWebサイトに通知し、window.location.replaceでコードを記述してユーザーをホームページに移動します.

2.会員脱退マニュアル機能の作成ステータス

最初の意図のように、会員脱退ボタンをクリックすると直ちに会員を脱退するのではなく、モードインタフェースを開き、同意したチェックボックスと「会員脱退」を同じ入力インタフェースに入力すると、会員脱退ボタンがアクティブになります.

	const [agreeChecked, setAgreeChecked] = useState(false)
	const [fillinText, setFillinText] = useState('')

	const agreeCheckHandler = () => {
		setAgreeChecked(!agreeChecked)
	}
	const fillinCheckHandler = e => {
		setFillinText(e.target.value)
	}

は、まず、同じ「同意」チェックボックスのステータスと「メンバーの終了」入力を入力したときに動作可能なステータスを作成します.

のチェックボックスハンドラを作成し、チェックボックスをクリックしたときにチェックボックスをアクティブにします.e.targetもあります.valueは、現在の入力値が何であるかを知ることができる状態を作成します.

3.ガイド機能の実現

ガイドをテキスト形式で表示するのは初めてで、同意した場合はチェックボックスで選択すると、先ほど作成したAgreeChekHandlerが起動して選択されます.

onChange FillinCheckHandler入力値をチェックします.

agreeChecked === true && fillinText === '회원탈퇴'

上記のコードのように、チェックボックスでチェックを行い、入力値を会員脱退時に最初に作成した会員脱退ボタンをアクティブにします.これは3つの連想によって実現された.

文章を減らす..。

ユーザが会員脱退機能を使用する際にミスを犯す確率を低減するために,再脱退する前にこれらの機能を追加し,ユーザが会員脱退という機能をよりよく使用できるようにした.