회원가입,로그인,로그아웃 기능,경로 설정(react + spring boot )

1. 회원가입,로그인,로그아웃 기능

- auth.service

const API_URL = "http://localhost:8080/api/auth/";

class AuthService {
  register(username, email, password) {
      return axios.post(API_URL + "signup", {
        username,
        email,
        password
      });
    }
 }

- spring boot 서버에 넘겨주기 위해 API_URL를 알맞게 설정하고 username, email, password를 값을 post를 보내준다. 이 때 통신을 하기 위해서 axios 썼다. 서버에서는 중복값 체크를 한다.

login(username, password) {
    return axios
      .post(API_URL + "signin", {
        username,
        password
      })
      .then(response => {
        if (response.data.accessToken) {
          localStorage.setItem("user", JSON.stringify(response.data));
        }

        return response.data;
      });
  }

- 서버에서 username, password 보낸 뒤 DB에 값이 있으면 Jwt 토큰을 반환한다. accessToken이 있다면 사용자의 localStorage("user", value) 값을 넣어주고 데이터를 return 한다.

logout() {
    localStorage.removeItem("user");
  }
  
getCurrentUser() {
    return JSON.parse(localStorage.getItem('user'));
  }

- logout 버튼을 누르게 되면 localstorage 값을 사라진다.
- 일반유저, 관리자, 중재자 권한을 파악하기 위해 CurrentUser( ) 추가한다.

 

2. 권한 제어 

- user.service

const API_URL = 'http://localhost:8080/api/role/';

class UserService {
  authHeader() {
    const user = JSON.parse(localStorage.getItem('user'));
   if (user && user.accessToken) {
      return { Authorization: 'Bearer ' + user.accessToken }; 
    } else {
      return {};
    }
  }
  getPublicContent() {
    return axios.get(API_URL + 'all');
  }

  getUserBoard() {
    return axios.get(API_URL+'user',{headers: authHeader()});//Authorization: 'Bearer' + user.accessToken
  }

  getModeratorBoard() {
    return axios.get(API_URL + 'mod', { headers: authHeader() });
  }

  getAdminBoard() {
    return axios.get(API_URL + 'admin', { headers: authHeader() });
  }
}

- authHeader( )에 사용자의 jwt 토큰을 가져와서 리턴 값으로 Bearer+accessToken 보낸다. 
- axois.get으로 각 연결된 경로를 통해 서버의 값을 가져온다.