1. 구현하기

진행 상황

• 푸터 레이아웃
• 로그인 시 권한 부여 : 작성
• 작성자가 같을 시 권한 부여 : 수정, 삭제

진행 예정

• 백엔드 서버 완성되면 테스트 해보기

---

2. TIL

json server auth 사용하기

accessToken 저장하기

이제 기능들이 모두 구현이 되어서 로그인 시 토큰값을 받아서 토큰값이 있을 경우 로그인 상태라고 간주하여 글 작성, (로그아웃 기능이 있는)로그인 헤더로 변경되게 하는 작업이 필요했다.
그러려면 토큰을 받아서 테스트 해야하는데 구글링 해서 찾아보니 json server auth를 이용하면 쉽게 실제 db처럼 구현하고 테스트 해볼 수 있었다.

기본 설정

1. json server auth 설치 : npm i -D json-server-auth
2. db.json 생성 : 기본적으로 users에 사용자를 추가함

{
  "users": []
}

3. pakage.json scripts 추가 : "server": "json-server-auth --watch db.json --port 8000 "
4. 서버 실행 : npm run server

적용 하기

1. 회원가입 : /register

우선 회원가입의 post api를 http://localhost:8000/register 로 바꿔준다.
회원가입은 register로 보내줘야 db.json으로 값이 잘 들어가고, 비밀번호는 암호화되어서 저장된다.

2. 로그인 : /login

그리고 로그인의 post api를 위와 같이 엔드포인트만 login으로 바꿔준다.
이때, 응답 데이터를 받으면 로그인 시에 accessToken이 저장되는 것을 확인할 수 있다.

3. accessToken과 id 저장

로그인시 post의 응답 데이터안의 토큰과 로그인 아이디에 접근하여, 로컬스토리지 setItem으로 해당 데이터들을 로컬 스토리지에 저장한다.

   await axios
      .post('http://localhost:8000/login', {
        email,
        password,
      })
      .then((res) => {
        toast.success('Login Success!');
        localStorage.setItem('accessToken', res.data.accessToken);
        localStorage.setItem('member_id', res.data.user.name);
      })
      .then(() => {
        navigate('/');
      })
      .catch(() => {
        toast.error('Login Failed!');
      });

4. accessToken과 id 사용

토큰과 로그인 아이디가 필요하면 getItem으로 로컬스토리지에 저장된 토큰과 아이디값을 꺼내쓴다.
토큰은 로그인 상태인지 확인할 때 사용한다. 이번 프로젝트에선 로그인 상태에서만 글 작성이 가능하고, 로그인 상태에 헤더가 바뀌게 할 때 사용했다. 만약 로그인 상태가 아니라면 로그인 페이지로 넘어가게끔 해주었다.
아이디는 로그인한 아이디가 작성자의 아이디와 같은지를 확인할 때 유용하다. 이를 이용해서 이번 프로젝트에선 로그인한 아이디가 작성자와 같을때 수정과 삭제버튼이 보이게끔 구현했다.
그리고 작성자의 아이디를 기존엔 임의의 값을 주었는데, 로그인한 아이디를 사용하여 post에 보내주면 로그인한 아이디로 작성하면 그것이 서버에 넘어가서 작성자 아이디가 된다.

  const isLogin = localStorage.getItem('accessToken');
  const isPost = localStorage.getItem('member_id') === data.member_id;
  const member_id = localStorage.getItem('member_id');

5. 로그아웃

우선 로그아웃은 api를 사용하지 않고, 로컬스토리지만을 사용하여 구현해보았다. 추후에 백엔드 쪽에서 로그아웃 api를 보내주면 바꿀 예정이지만 테스트 전까지 여러 계정을 만들어보고 테스트하려면 로그아웃이 되어야 편해서 간단하게 구현해보았다.

  const onLogout = () => {
    localStorage.clear();
    navigate('/');
    location.reload();
    window.scrollTo(0, 0);
  };