리액트 로그인질문..
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같은거에 요청보내는 로직을 작성해서, 토큰만보내서 유효한 토큰인지 아닌지, 유효하지않은토큰이면 에러를 리턴시켜준다던가, 리프레쉬토큰을 발급시켜서 연장시켜준다던가 이런식으로하면될까요?
마지막으로 질문이 좀 많고 중구난방인데 죄송스럽고 조심스럽네요..
#react
#login
#register
#local-storage
#jwt