React - jwt를 이용한 유저 인증

Logic - 클라이언트가 로그인을 하여 로그인에 성공하면 jwt 토큰을 발행하고 유저 조회 및 유저 정보 수정시 token으로 유저를 판별하여 접근 유무를 확인하는 것입니다.

 

Case 1 - Prisma를 이용한 Client생성 (client.js)

import { PrismaClient } from ".prisma/client";
 
const client  = new PrismaClient();
 
export default client;

 

Case 2 - Server를 실행시켜주는 server.js 생성 

require('dotenv').config();
import { ApolloServer } from "apollo-server";
import schema from "./schema";
import { getUser } from "./users/users.utils";
 
const PORT = process.env.PORT;
 
const server = new ApolloServer({
    schema,
    context: async ({ req }) => {
        return {
            loggedInUser: await getUser(req.headers.token)
        }
    }
});
 
server
    .listen(PORT)
    .then(() => console.log(`Server Running... PORT=${PORT}`));

 

Case 3 - 로그인을 위한 typeDefs(정의)와 resolvers(해결) 선언

1. 로그인을 위한 typeDefs선언

import { gql } from "apollo-server";
 
export default gql`
    type LoginResult {
        result: Boolean!
        token: String
        error: String
    }
 
    type Mutation {
        login(username: String!, password: String!): LoginResult!
    }
`;
 

 

2. 로그인을 위한 resolvers선언

npm install jsonwebtoken //설치

로그인 성공시 jwt를 발생합니다.

import client from "../../client"
import bcrypt from "bcrypt"
import jwt from "jsonwebtoken"
 
export default {
    Mutation:{
        login: async(_, {username, password}) => {
            const user = await client.user.findFirst({ where: {username} })
 
            if(!user){
                return {
                    result: false,
                    error: "유저를 찾지 못하였습니다."
                };
            }
 
            const passwordResult = await bcrypt.compare(password, user.password);
 
            if(!passwordResult){
                return {
                    result: false,
                    error: "비밀번호가 일치하지 않습니다."
                };
            }
            
            //npm install jsonwebtoken // 일치하면 token 발생
            const token = await jwt.sign({id: user.id}, process.env.SECRET_KEY);
            return {
                result: true,
                token
            }
        }
    }
}

 

 

Case 4 - 유저 조회

1. 유저 조회를 위한 typeDefs선언

import { gql } from "apollo-server-core";
 
export default gql`
    type EditProfileResult {
        result: Boolean!
        error: String
    }
 
    type Mutation{
        editProfile(
            firstName: String
            lastName: String
            username: String
            email: String
            password: String
        ): EditProfileResult
    }
`;

 

2. 선언한 typeDefs에 대한 resolvers선언

import client from "../../client"
import bcrypt from "bcrypt"
 
export default {
    Mutation: {
        editProfile: async (_, {
            firstName, lastName, username, email, password: newPassword
        }, { loggedInUser }) => {
            console.log(loggedInUser);
 
            let tempPassword = null;
            if(newPassword){
                tempPassword = await bcrypt.hash(newPassword, 10);
            }
            const result = await client.user.update({
                where:{
                    id:loggedInUser.id
                },
                data:{
                    firstName,
                    lastName,
                    username,
                    email,
                    ...(tempPassword && {password:tempPassword})
                }
            })
 
            if(result.id){
                return{
                    result: true
                }
            }else{
                return {
                    result: false,
                    error: "실패"
                }
            }
        }
    }
}

 

• editProfile을 요청할 때 header에 token을 추가하여 getUesr() 메서드로 해당 유저가 존재하는지 판별후 유저가 존재한다면 유저를 반환하고 그렇지 않다면 NULL을 반환합니다.

 

• editProfile은 server.js로 부터 loggedInUser 변수를 받아서 해당 User를 찾고 있으며 USer의 id를 이용하여 데이터를 수정하고 있습니다.