리액트 로그인질문..

Question

react + 파이어베이스만 써오다가 react + express 조합을 오랜만에 사용중인데
긴가민가한점이있어서 질문드립니다 ㅠㅠ

import axios from axios;

const instance = axios.create({
  baseURL: process.env.REACT_APP_API_BASE_URL,
  timeout: 2500,
  headers: {
    Content-Type: application/json,
    withCredential: true,
  },
});

instance.interceptors.request.use(
  (config) => {
    const token = localStorage.getItem(token);

if (token) {
      config.headers[Authorization] = token;
    } else {
      delete config.headers[Authorization];
    }
    return config;
  },
  (error) => {
    return Promise.reject(error);
  }
);

export default instance;

이렇게 인터셉터를주어서, 요청할 때마다  토큰을 전달하고있습니다.

그리고 프라이빗 라우터 + 유저정보 인증 훅을 사용해서 로그인사용자만 접근가능하게 페이지를 설정해줬습니다.

근데 
질문 1. 네트워크탭 Request Headers 에서 Authorization을 확인해보면 토큰정보가 그대로 노출되고있는데요 원래 이렇게되나요?

질문 2. Bearer + token 이렇게 보내는 경우는 포스트맨이나 이런걸로 테스트할때만 Bearer 을 붙여서 보내주면될까요?

질문 3. 검색 키워드가 생각이안나서 질문으로 올립니다. 아주 옛날에는 (4년전) 
App.tsx에서

if(localstorage.token){ 
 setAuthToekn(token);
} 
이런식으로 하고, setAuthToken함수는

import axios from axios;

const setAuthToken = (token) => {
  if (token) {
    axios.defaults.headers.common[x-auth-token] = token;
  } else {
    delete axios.defaults.headers.common[x-auth-token];
  }
};

export default setAuthToken;

이런식으로 되어있었는데요, 요즘은 제가 짠 코드처럼 axios.인터셉터 식으로 하는게 맞나요?

질문 4. 그럼 요즘도 회원가입/로그인시 로컬스토리지에 유저 정보 (닉네임 이름 이메일, 토큰정보)만 저장해두고 로그인하면, 로그인버튼이 회원 닉네임으로 변하게 해준다던가.. 이런식으로 분기처리를 하나요? ( 저는 이렇게하고있어서요.. 로딩처리를 줄수도있겠지만 깜빡거리는게 싫고, 또 로컬스토리지로안하면 로그인버튼으로 잠깐바꼇다가 회원닉네임이 표시되더라구요)

질문5. (질문4와 이어집니다.) 만약 질문4처럼하면 사용자가 사이트에 계속 로그인중인데, 이 토큰이 끝났는지 판단하려는 코드를 따로 작성해줘야할까요? 
예를들면,

App.tsx에 서버 api/auth같은거에 요청보내는 로직을 작성해서, 토큰만보내서 유효한 토큰인지 아닌지, 유효하지않은토큰이면 에러를 리턴시켜준다던가, 리프레쉬토큰을 발급시켜서 연장시켜준다던가 이런식으로하면될까요?

마지막으로 질문이 좀 많고 중구난방인데 죄송스럽고 조심스럽네요..

허니 · Answer

네
아니요 토큰을 헤더에 넣는 건 토큰이 필요할 때 넣는 것이니 postman과 상관없습니다
코드에 생략이 많아서 모르겠네요
아니요 리액트 쿼리나 swr을 많이 사용합니다
네

아직 전반적인 구조가 감이 안잡힌다면 유튜브에서 mern 풀스택 프로젝트 영상 많으니 보시는 것을 추천드립니다