요청을 보낼때마다 AccessToken 을 넣어야 하는데…
매번 api 을 작성할때마다 헤더 에서 토큰을 꺼내오고, 넣는 코드를 중복해서 작성했나요?
그럴 필요 없이 간단하게 매 요청에 토큰을 간편하게 삽입할수 있는법을 알려드릴게요
RequestInterceptor.ts
import axios from 'axios';
const axiosInstance = axios.create({
baseURL: 'http://localhost:8081/api',
});
axiosInstance.interceptors.request.use(
config => {
const token = localStorage.getItem('accessToken'); // 알맞은 key 를 넣어주세요.
if (token) {
// 'Authorization'헤더에 value 로 토큰을 넣을거에요.
config.headers.authorization = token;
}
return config;
},
error => {
return Promise.reject(error);
},
);
export default axiosInstance;
TypeScript
복사
인터셉터 사용하기
간단하게 유저정보를 api 로 받아오는 곳에 사용해보겠습니다
UserApi.ts
import axiosInstance from './interceptor/RequestInterceptor.ts';
export const loginUserInfo = async () => {
const response = await axiosInstance.post('/users/me');
console.log(response.data);
return response.data;
};
TypeScript
복사
이제 이 api 를 컴포넌트에 적용해볼까요?
TheLogin.vue
로그인 컴포넌트의 <script setup lang=”ts”></script> 부분을 발췌했습니다. 굵은 글씨로 표시해 둔 부분을 보면 대략적인 사용법이 이해가 가실거에요.
import { useAuthStore } from '../store/AuthStore.ts';
import router from '../router';
import { loginUserInfo } from '../api/UserApi.ts';
const email = ref('');
const password = ref('');
const authStore = useAuthStore();
const handleLogin = async () => {
const userData = {
email: email.value,
password: password.value,
};
try {
const response = await localLogin(userData);
if (response.status == 200) {
authStore.setLoginStatus(true);
console.log(authStore.isLoggedIn);
const userInfoResponse = await loginUserInfo();
localStorage.setItem('userInfo', JSON.stringify(userInfoResponse));
await router.push('/dash-board');
}
} catch (error) {
console.log(error);
}
};
TypeScript
복사