01. 추가된 기능
로그인 체크 기능
- 로그인 화면, 회원가입 화면 외에 다른 모든 페이지에 접속하는 경우, API를
GET /users/me
경로로 호출합니다.
- API의 HTTP Status Code가 200이 아니라면 로그인이 안되어 있는것으로 판단하여 로그인 화면으로 이동시킵니다.
이와 함께 브라우저에 토큰이 저장되어 있던 경우 해당 토큰을 브라우저에서 제거합니다.
- API의 응답이 정상적으로 온 경우, 응답 값에 있는 사용자의 정보를 사용하여 화면을 표시합니다.
로그인 화면이 추가
- 브라우저에 토큰이 저장되어 있는 상태라면 이미 로그인을 했던것으로 간주하여 상품 목록 페이지로 이동시킵니다.
- 로그인 버튼을 누르는 경우
POST /auth
경로로 API를 호출합니다.
email, password 필드로 데이터를 보냅니다.
- 로그인이 성공하는 경우 API 응답 값으로 받은 토큰을 브라우저에 저장하고, 상품 목록 페이지로 이동시킵니다.
- 로그인이 실패하는 경우 모달을 띄워 로그인이 실패했다고 안내합니다.
회원가입 화면이 추가
- 회원가입 버튼을 누르는 경우
POST /users
경로로 API를 호출합니다.
email, nickname, password, confirmPassword 필드로 데이터를 보냅니다
- 회원가입에 성공한 경우 로그인 페이지로 이동시킵니다.
- 회원가입에 실패한 경우 API 응답 값 중 "errorMessage" 필드에 있는 메세지를 보여줍니다.
02. 기능을 구현하기 전에 준비할 것.
- JWT 토큰을 만들기 위한 라이브러리
- 필요한 API
- 로그인 API
- 회원가입 API
- 내 정보 조회 API
- 로그인 확인에 해당하는 기능은 미들웨어로 구현해서 여러 라우터에서 공용으로 사용
- User 모델 구현
const express = require("express");
const mongoose = require("mongoose");
mongoose.connect("mongodb://127.0.0.1:27017/shopping-demo", {
useNewUrlParser: true,
useUnifiedTopology: true,
});
const db = mongoose.connection;
db.on("error", console.error.bind(console, "connection error:"));
const app = express();
const router = express.Router();
app.use("/api", express.urlencoded({ extended: false }), router);
app.use(express.static("assets"));
app.listen(8080, () => {
console.log("서버가 요청을 받을 준비가 됐어요");
});
const mongoose = require("mongoose");
const UserSchema = new mongoose.Schema({
email: String,
nickname: String,
password: String,
});
UserSchema.virtual("userId").get(function () {
return this._id.toHexString();
});
UserSchema.set("toJSON", {
virtuals: true,
});
module.exports = mongoose.model("User", UserSchema);