6. 비밀번호 변경

새로운 비밀번호로 변경

 

-백엔드-

 

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;