vue router, interceptor 설정

vue router, interceptor 설정

 

router 설정 

app.vue

<template>
  <div id="app">
    <nav>
      <router-link to="/">main</router-link>
      <router-link to="/home">home</router-link>
    </nav>
    <router-view />
  </div>
</template>

<script>

export default {
  name: 'App'

}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

 

app.vue css 적용 및 공통 컴포넌트 적용

<style>
  @import './layout.css';
</style>

or

require('@/layout.css')

 

 

main.js

import { createApp } from 'vue';

import App from './App.vue';

import router from './router';

const app = createApp(App);
app.use(router);
app.mount('#app');

 

router.js

// src/router.js
import { createRouter, createWebHistory } from 'vue-router';
import main from './page/main/main.vue';
import home from './page/sub/home.vue';

const routes = [
    {
        path: '/',
        name: 'main',
        component: main,
    },
    {
        path: '/home',
        name: 'home',
        component: home,
    },
];

const router = createRouter({
    history: createWebHistory(),
    routes,
});

export default router;

 

 

일반적인 프로젝트 구조

 

 

interceptor 설정 

https://axios-http.com/kr/docs/interceptors

인터셉터 | Axios Docs

 

인터셉터

// 요청 인터셉터 추가하기
axios.interceptors.request.use(function (config) {
    // 요청이 전달되기 전에 작업 수행
    return config;
  }, function (error) {
    // 요청 오류가 있는 작업 수행
    return Promise.reject(error);
  });

// 응답 인터셉터 추가하기
axios.interceptors.response.use(function (response) {
    // 2xx 범위에 있는 상태 코드는 이 함수를 트리거 합니다.
    // 응답 데이터가 있는 작업 수행
    return response;
  }, function (error) {
    // 2xx 외의 범위에 있는 상태 코드는 이 함수를 트리거 합니다.
    // 응답 오류가 있는 작업 수행
    return Promise.reject(error);
  });

 

제거

const myInterceptor = axios.interceptors.request.use(function () {/*...*/});
axios.interceptors.request.eject(myInterceptor);

 

 

커스텀 인스턴스

const instance = axios.create();
instance.interceptors.request.use(function () {/*...*/});