12.16일 공부

비밀번호 변경

template에 추가

a(href="change-password")  

상대 경로가아닌 절대 경로로 입력하면 localhost:4000/users/edit 에서 말단 부분만 바뀜 

localhost:4000/users/change-password로 

 

 

changePassword form 을 만들었는데 

깃허브계정으로 가입한경우에는 비밀번호가 없어서 사용 할 수 없게 해야함 

1.해당 페이지에 오면 리다이렉트

export const getChangePassword = (req,res)=>{
    if(req.session.socialOnly === true){
        return res.redirect ("/")
    }

    return res.render("users/change-password", {pageTitle: "Change Password"})
}

 

2.소셜로 로그인한 사람은 아예 해당 문구,링크가 안보이게 

    if !loggedIn.socialOnly
        hr
        a(href="change-password") Change Password →

 

---

비밀번호 변경하기 

User.js에 

userSchema.pre("save", async function(){

  this.password = await bcrypt.hash(this.password, 5);

}); 이것으로 

새로운 비밀번호를 hash 하려면 

 user.save()

 

export const postChangePassword =async (req,res)=>{
    const{
        session: {
            user: { _id },
        },
        body: { oldPWD, newPWD, newPWDconfirmation },
    }=req;
    const user  = await User.findById(_id); 
    const ok = await bcrypt.compare(oldPWD, user.password);
    if(!ok){
        return res.status(400).render("users/change-password", {
            pageTitle: "Change Password",
            errorMessage:"The current password is incorrect"
        });
    }
    if(newPWD !==newPWDconfirmation){
        return res.status(400).render("users/change-password", {
            pageTitle: "Change Password",
            errorMessage:"The password does not match the confirmation"
        });
    }
    user.password = newPWD ;
    await user.save(); //user.save() 해야 저장 전에 비밀번호 hash기능 사용 할 수있음 user.pre("save",function)
    return res.redirect("/users/logout"); //비밀번호 하여 로그아웃시키기 

 

---

파일올리기 

edit Profile

pug에 추가 

        label(for="avatar") Avatar
        input(type="file" id="avatar" name="avatar" accept="image/*")

 

서버에 파일을 저장하고 그 이미지에대한 정보 얻기

  middleware multer 다운

npm i multer

NOTE: Multer will not process any form which is not multipart (multipart/form-data).

Don't forget the enctype="multipart/form-data" in your form.

form(method="POST" , enctype="multpart/form-data") 파일을 백엔드로 보내기위한 encoding type 을 바꾼거임 

+ https://www.npmjs.com/package/multer

   enctype ="multipart/form-data" 에 관해서 궁금해서 몇가지 정리한 글을 소개합니다.
   https://kasterra.github.io/what-is-multipart-form-data/

 

 

공식문서를 보면 미들웨어 생성 해야 함 

export const  uploadFiles = multer({ dest:"uploads/" })  //사용자가 보낸 파일을 uploads폴더로 보내기

uploads 폴더생성

router에 post에 적용 할 거임 

                                                                                               미들웨어                     컨트롤러 

userRouter.route("/edit").all(protectorMiddleware).get( getEdit).post(uploadFiles.single("avatar"),postEdit);

사용자가 /edit으로 form을 보내면 uploadFiles라는 middleware를 거쳐서 /uploads에 파일을 저장하고 req object에 req.file를 추가한 후 postEdit컨트롤러 사용 

uploadfiles.single: 한 개의 파일만 올린다는 옵션

("avatar"): input name="avatar"에서 가져옴 

위에 빨간 글씨는 req.flie을 추가해줌 

 

어떻게 생겼는지 보기위해fie 변수만들어주고  cosnole.log(file)

//{
  fieldname: 'avatar',
  originalname: 'f35d665a9feef.jpg',
  encoding: '7bit',
  mimetype: 'image/jpeg',
  destination: 'uploads/',
  filename: '15e62045afc74ffa241fc723327c83f3',
  path: 'uploads/15e62045afc74ffa241fc723327c83f3',
  size: 1579860
}

 

export const postEdit= async (req, res)=>{
    const{
        session: {
            user: { _id, avatarUrl },
        },
        body: { name, email, username, location},
        file,  //file:{path} 사용 X, file이 존재하지 않으면 avatarUrl: file.path사용 할 수 없다. 
    }=req;
    console.log(file);
    const updatedUser= await  User.findByIdAndUpdate(
        _id,
    {
        avatarUrl: file ? file.path : avatarUrl, // avatarUrl:file만 하면 아무것도 업로드하지 않을 때인 undifined를 저장하게됨 input에 올린게 있으면 그것을 사용하고 없으면 session의 avatarUrl
        name,
        email,
        username,
        location,
    },
    { new: true }
    );

 

+gitignore에 /uploads추가

 

 

 

db에절대절대 파일 저장 xxxx  //db는 파일 저장을 위한게 아님  폴더에 이미지 저장해 

db에는 파일 위치저장 url

 

db는 엑셀 시트같은 것 

 뭐든지 다 쌓아놓는 곳은 하드, 혹은 웹하드, AWS에서는 S3에 해당하는 것이고 데이터베이스는 문자, 테이블, 시트로 표현할 수 있는 것이라고 합니다.

따라서 데이터베이스 자체에는 이미지를 저장할 수 없기 때문에 경로만 저장해두며 해당 경로에 있는 이미지를 별도로 찾게 되는 것으로 이해했습니다.

 

+pug

    img(src="/" + loggedInUser.avatarUrl , width="100", height="100")

위처럼 /안해주면 상대주소로 저장됨 

새탭으로 이미지 열었을 때 

http://localhost:4000/uploads/75fe47d8631f14e2af3e27be126ae240

위와 같은 주소를 얻게되고 

route에 지정하지 않아서 페이지를 불러 올 수없음

r게다가 브라우저가uploads폴더 안에 파일에 접근해야해 

어디로 가야되는지 알려줘야함 

브라우저가 어떤 페이지와 폴더를 볼 수있는지 알려줘야해 

 

staticfiles serving  폴더 전체를 브라우저에 노출 시킨다는 의미

server.js

app.use("/uploads", express.static("uploads"));

//업로드 주소로가면 uploads파일에 있는 폴더 접근 허용 

 

-->사진은 나오지만 사진 업데이트 할 때 마다 기존 사진들이 /uploads파일에 저장 됨 

 

첫 번째 문제, 우리가 파일을 서버에 저장함

서버를 종료하고 키면 그 전 서버에 있던 파일들은 삭제 됨

--> 파일을 서버에 저장하지 않고 다른 방법 

서버가 사라졌다 다시돌아와도 파일은 그대로있도록 -->배포할 때 해보겠음 

 

When log in with GitHub for the first time, the image will not be output because of the different image path.So it was solved like this.

-if(loggedInUser.avatarUrl.startsWith("upload"))
img(src="/" + loggedInUser.avatarUrl,height="100",width="100")
-if(loggedInUser.avatarUrl.startsWith("http"))
img(src=loggedInUser.avatarUrl,height="100",width="100")