4/10-4/14 WIL - 왜 나만 안 돼 JWT

 

 

spring+react로 게시판만들기를 진행중이다.

회원가입 후, DB에 회원정보 저장까지 완료되어 JWT로 로그인 및 인증/인가 시스템을 구현하려 했다,,,

 

여러 버전(11.5~12.3)과 예제들, 공식 깃헙 문서까지 보면서 시도했다. io.jsonwebtoken은 겨우겨우 설치했지만, 왜인지 springboot-security 의존성은 추가되지도 않고, 기본적인 security가 없으니 어떤 예제도 따라할 수 없었다 ㅠㅠ

 

이렇게 JWT에만 매달릴 수는 없다..시간이 없음!

 

내 우회책은 SHA256을 이용하는 것이다. 아래 블로그를 참고했다.

SHA256 암호화 알고리즘을 이용한 회원가입, 로그인

 

유저가 보내온 PW를 암호문을 이용해 암호화하고, 이 암호화 된 PW와 암호문을 DB에 저장한다.

이후, 로그인 할 때는 유저가 보내온 ID로 DB에서 암호문을 가져오고, 같이 보내온 PW로 암호화를 진행. DB의 PW와 암호화된 결과가 같다면 인증 완료다.

 

인증이 되었다면 이제 사용자 정보를 웹 페이지에서 계속 유지해야 하는데, 이는 GPT한테 물어봤다.

제대로 된 인가 시스템을 가지려던 건 아니라서 전역 변수에 사용자가 로그인 되었고, name 정보 정도만 유지하려 했다.

 

GPT가 UserContext라는 시스템을 알려줘서 열심히 따라했다.

 

 

  UserContext.js ↓

import { createContext, useState } from 'react';

export const UserContext = createContext();

export const UserProvider  = ({ children }) => {
    const [user, setUser] = useState(null);

    const updateUser = (newUserData) => {
        setUser(newUserData);
    };

    return (
        <UserContext.Provider value={{user, updateUser}}>
            {children}
        </UserContext.Provider>
    );
};

 

UserContext를 만들고, user라는 객체에 대한 업데이트를 위해 UserProvider를 통해 updateUser 함수를 선언한다.

이제 선언은 완료되었고, UserContext가 필요한 가장 상위 브라우저에 UserProvider를 선언한다.

function App() {
  return (
    <div className="App">
        <UserProvider>
            <BrowserRouter>
                <Routes>
                    <Route path="/" element={<Main />}></Route>
                    <Route path="/login" element={<Login />}></Route>
                    <Route path="/signup" element={<Signup />}></Route>
                    <Route path="/write" element={<Write />}></Route>
                </Routes>
            </BrowserRouter>
        </UserProvider>
    </div>
  );
}

 

UserContext를 사용할 하위 객체들을 모두 감싸줘야 한다.

 

이제 하위 객체에서는 UserContext를 사용해 user에 대한 수정, 사용이 가능하다.

import React, {useContext} from "react";
import { UserContext } from "./auth/UserContext";

 

이렇게 import해주고 

업데이트

updateUser({name: res.data["name"]});

 

정보 가져오기

"userName":user.name

 

이런식으로 사용하면 된다. 간단!

 

JWT는 스프링 버전부터 맞추면서 해야할 듯 하다...근데 security는 왜 안 됨? JWT가 설치됐는데 security가 안 되는 게 너무 황당하다...어휴

괜찮아 나만무 끝나고 하면 댐!

 

 

  + css 적용이 계속 풀린다면

 

css 적용이 된 걸 확인했는데, reload하면 풀려버리는 현상이 있었다.

width도 적용한 대로 안 되고,, bulma와 연계해서 사용하느라 복잡해진 감이 있지만,,

일단 width 적용은 상위 객체의 width를 변경해줘야 하위 객체도 그 틀? 안에 갇힌다.

근데 이러면 그냥 자식의 width는 적용이 안 된 것 아닌가...싶지만 원하는 결과는 나왔으니 뭐...

 

이제 글쓰기 결과 -> DB에 save / DB에서 조회한 결과 -> web에 동적으로 적용하기 작업을 해야한다.