새로운 비밀번호로 변경
-백엔드-
controller - <userController.js>
(...)
//Post Change Password, /change_pwd : 비밀번호 변경
const changePwd = asynchHandler(async (req, res) => {
const { username, password, checkPassword } = req.body;
const user = await User.findOne({ username });
if (password !== checkPassword) {
return res.status(401).json({ message: "비밀번호가 일치하지 않습니다." });
}
user.password = await bcrypt.hash(password, 10); //새 비밀번호로 해쉬
await user.save();
res.status(200).json({ message: "비밀번호가 성공적으로 변경되었습니다." });
});
(...)
module.exports = { changePwd };
route - <userRoute.js>
const express = require("express");
const router = express.Router();
const {
getUserData,
loginUser,
findId,
findPwd,
changePwd, //비밀번호 변경 함수
checkAuthCode,
registerUser,
addImageScore,
addCombineScore,
} = require("../controller/userController");
const { authUser } = require("../middleware/authMiddleware");
router.route("/login").get(authUser, getUserData).post(loginUser);
router.route("/find_id").post(findId);
router.route("/find_pwd").post(findPwd);
router.route("/change_pwd").post(changePwd); //비밀번호 변경 라우터
router.route("/authcode").post(checkAuthCode);
router.route("/register").post(registerUser);
router.route("/imageScore").post(authUser, addImageScore);
router.route("/combineScore").post(authUser, addCombineScore);
module.exports = router;
-프론트엔드-
page - <PwdChange.js> : 비밀번호 찾기 페이지
import React, { useEffect, useState } from "react";
import "../../css/user.css";
import axios from "axios";
import { useNavigate } from "react-router-dom";
function PwdChange() {
const navigate = useNavigate();
const username = localStorage.getItem("username"); //localStorage에 username을 state에 저장
const [password, setPassword] = useState(""); //새 비밀번호 state
const [password2, setPassword2] = useState(""); //새 비밀번호 확인 state
const [passwordError, setPasswordError] = useState(""); //비밀번호 에러 state
const changeNewPassword = (e) => setPassword(e.target.value);
const changeNewPassword2 = (e) => setPassword2(e.target.value);
const pwdChangeSubmit = async (e) => { //비밀번호 변경 함수
e.preventDefault();
const inputs = [password, password2];
const pwdData = {
username: username,
password: password,
checkPassword: password2,
};
if (inputs.some((input) => input === "")) {
alert("빈칸을 입력해주세요.");
} else {
try {
await axios
.post("http://localhost:5000/change_pwd", pwdData)
.then((res) => {
alert(res.data.message);
navigate("/");
});
localStorage.removeItem("username");
} catch (err) {
setPasswordError(err.response.data.message);
}
}
};
useEffect(() => {
//localStorage에 username이 없으면 로그인 페이지로 이동
if (localStorage.getItem("username") === null) navigate("/");
//localStorage에 token이 있으면 메인 페이지로 이동
if (localStorage.getItem("token") !== null) navigate("/main");
}, [navigate]);
return (
<div className="userContainer">
<h1>비밀번호 변경</h1>
<form onSubmit={pwdChangeSubmit}>
<div>
<label>새 비밀번호</label>
<input
type="password"
value={password}
onChange={changeNewPassword}
/>
</div>
<div>
<label>새 비밀번호 확인</label>
<input
type="password"
value={password2}
onChange={changeNewPassword2}
/>
<h4>{passwordError}</h4>
</div>
<button type="submit" className="submitBtn">
비밀번호 변경
</button>
</form>
</div>
);
}
export default PwdChange;
<App.js>
import React from "react";
import { BrowserRouter, Route, Routes } from "react-router-dom";
import Login from "./page/User/Login";
import Register from "./page/User/Register";
import PostAdd from "./page/Comunity/PostAdd";
import PostList from "./page/Comunity/PostList";
import PostDetail from "./page/Comunity/PostDetail";
import PostUpdate from "./page/Comunity/PostUpdate";
import Home from "./page/Home";
import ImageRegist from "./page/Game/ImageRegist";
import ImageGame from "./page/Game/ImageGame";
import CombineGame from "./page/Game/CombineGame";
import IdFind from "./page/User/IdFind";
import PwdFind from "./page/User/PwdFind";
import PwdChange from "./page/User/PwdChange";
function App() {
return (
<div>
<BrowserRouter>
<Routes>
<Route index element={<Login />} />
<Route path="/find_id" element={<IdFind />} />
<Route path="/find_pwd" element={<PwdFind />} />
<Route path="/change_pwd" element={<PwdChange />} /> <!--비밀번호 변경-->
<Route path="/register" element={<Register />} />
<Route path="/main" element={<Home />} />
<Route path="/post" element={<PostList />} />
<Route path="/post/add" element={<PostAdd />} />
<Route path="/post/:id" element={<PostDetail />} />
<Route path="/post/:id/update" element={<PostUpdate />} />
<Route path="/image/add" element={<ImageRegist />} />
<Route path="/imageGame" element={<ImageGame />} />
<Route path="/combineGame" element={<CombineGame />} />
</Routes>
</BrowserRouter>
</div>
);
}
export default App;
'프로젝트 > 로그인, 회원가입' 카테고리의 다른 글
7. 인증코드 제한 시간 (0) | 2024.06.06 |
---|---|
5. nodemailer, 인증코드 (0) | 2024.05.27 |
4. 아이디 찾기 (0) | 2024.05.24 |
3. 이메일, 정규 표현식 (0) | 2024.05.23 |
2. JWT 토큰 검증 (0) | 2024.05.20 |