[TIL] Vue Router Guard (2022-08-01 내용 이전)

💡 문제점
유니서베이 테스트 중에 URL에 프로젝트 번호를 입력하면 권한이 없더라도 접근이 가능한 문제점이 발견되었다.

프로젝트의 고유 번호가 630 이라고 하면 URL에 직접 make/630 등 프로젝트 번호를 입력하면 내 프로젝트가 아니여도 편집 및 실사 진행이 가능하다.

⚡ 원인
프로젝트에 관련하여 이 프로젝트가 내 프로젝트인지 확인해주는 검사 로직이 없었다.
그렇기 때문에 URL로 직접 입력하게 된다면 누구나 접근할 수 있는 문제점이 있다.

⚒️ 해결
- vue routes 에서 처리
라우터 이동 전에 권한을 검사하는 로직을 짜서 접근을 막는 방법

- Nest 에서 Custom Guards 를 만들어서 처리
요청이 왔을 경우 백엔드에서 권한을 조회한다.

이 2가지 중 하나만 해줘도 권한이 없는 프로젝트에 접근 하는 것을 막을 수 있다.

 

Vue Router Guard

---

// 1. 먼저 Vue Routes에 meta 옵션을 활용한다.
// EX: routes -> index.ts
Vue.use(VueRouter);
const routes: Array<RouteConfig> = [
    .
    .
    {
        path: '/login',
        name: 'login',
        component: Login,
        meta: { unauthorized: true },
    },
    .
    .
    .
    {
        path: '/project/sampling/:id',
        name: 'surveySampling',
        component: Sampling,
        meta: { projectAccess: true },
    },
    {
        path: '/project/make/:id',
        name: 'surveyMake',
        component: Make,
        meta: { projectAccess: true },
    },
    .
    .

 

meta 속성 값이 true 일 경우 검사를 하겠다 라는 의미

 

위의 속성을 가지고 rotuer.before 에서 검사를 수행할 수 있다.

 

// router.beforeEach() 조건 검사
router.beforeEach(async (to: Route, from, next) => {
    try {
        const { matched } = to;
        let verifyFlag = true;
        const isUnauthorized = matched.some((record) => record.meta.unauthorized);
        const { meta } = matched.find((record) => record.meta) || {};
        const { role }: any = meta || { role: '' };
        if (!isUnauthorized) {
            const { result } = await store.dispatch('verify');
            if (!result) {
                verifyFlag = false;
                return next('/login');
            }
        }
        if (verifyFlag === true && role === 'ADMIN') {
            if (!store.getters.isAdmin) {
            await app.$toast.error('권한이 없는 페이지 입니다.');
            return next('/project/list');
            }
        }
        // MARK: 추가된 프로젝트 권한 검사
        const projectAccess = matched.some((record) => record.meta.projectAccess);
        if (projectAccess) {
          const { params } = to;
          const { id } = params;
          const { data } = await store.dispatch('projectAccess', id);
          const { result } = data;
          if (result) return next();
          else {
            await app.$toast.error('잘못된 접근입니다. 다시 시도해주세요.');
            return next('/project/list');
          }
        }
        return next();
    } catch (e) {
        console.error(e);
    }
});

라우팅이 될 때 meta 속성이 있는지 확인을 하고 있으면 해당하는 값이 있는지 확인하게 된다.

 

project API 의 경우 meta 속성이 projectAccess 라는 이름으로 선언 되어있다.

따라서 beforeEach 에서 검사를 통과해야 렌더링 되도록 한다.

 

백엔드에서 위 조건을 검사하고 그에 맞는 반환값을 넘겨준다.

일치한다면 true를 반환하게 하였고, 일치하지 않는다면 false를 반환한다.

 

백엔드로 통신을 할 때 Axios Instance를 사용하였기 때문에 백엔드에서 넘겨진 값들은 제일 먼저 axios에서 받게 되어있다.

 

 

Vue Axios Instance Error Handling

---

백엔드에서 전달 받은 값으로 에러 처리를 할 수 있다.

// utils -> axios.ts (Custom Axios instance)
import axios from 'axios';
import store from '@/store/index';
import router from '@/router/index';
import Vue from 'vue';

const baseURL = '/api';
const instance = axios.create({
    baseURL,
    headers: {
        'Content-Type': 'application/json',
    },
    timeout: 20000,
});

// REQUEST (요청)
instance.interceptors.request.use((config) => {
    if (store) {
        const { token } = store.getters;
        if (token) config.headers['Authorization'] = `Bearer ${token}`;
    }
    return config;
});

// RESPONSE (응답)
instance.interceptors.response.use((response) => {
    return response;
    },
    (error) => {
        const { response } = error;
        const { data, status } = response;
        const { message } = data;
        if (status === 401) {
            return router.replace({ path: '/' }).catch(() => ({}));
        } else {
            Vue.$toast.error(message);
            console.log('debug-', data);
        }
    return response;
    }
);
export const ins = instance;

백엔드에서 응답값이 제대로 전달된다면 axios 에서 onFulfilled(response)에 전달된다.

 

만약 에러가 발생된다면 onRejected(error)에 전달이 되는데 이를 가지고 원하는 형태로 에러를 처리할 수 있다.

 

마무리

---

사실 초기에는 라우트를 이용하지 않고, 백엔드에서 가드를 만들어 처리를 할 생각이였다.

 

하지만... Nest에서 가드를 만들어 본 경험이 없어서 찾아서 만들어 보는데 시간이 오래걸릴 것 같아 급한대로 프론트에서 막는 방법을 선택했다.

 

그리고 무엇보다 Router Guard의 역할은 알고 있었지만 이번처럼 제대로 다뤄 본 적은 없었다.

 

이번에 Router Guard와 axios를 직접 custom 해보면서 이 둘을 이해하는데 큰 도움이 되었다.

 

일단 원하는 기능은 구현하였으니 Nest Guard는 구현이 되는대로 정리해 보자.

 

 

---