🤖 vue auto routing + 네비게이션 가

import { createRouter, createWebHistory } from 'vue-router'
import routes from 'vue-auto-routing'
import { createRouterLayout } from 'vue-router-layout';
import store from '../store';

const RouterLayout = createRouterLayout(layout => {
  return import('@/layouts/' + layout + '.vue')
})

const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes: [
    {
      path: '/',
      component: RouterLayout,
      children: routes
    }
  ]
});

//진입하기전 확인
router.beforeEach((to,from,next)=>{
  if(to.matched.some((res) => { return res.meta.requiresAuth } )){
    
    if(!store.state.token){
      alert('No have Token')
      router.push('/about');
      return false
    }
    else{
      next();
    }
    
  }
  next();
})

export default router

1.🚓 vue-auto-routing 설치

vue-auto-routing은 폴더구조 기반으로 자동적으로 route를 만들어주는 역할을 한다. 따로 경로를 추가할 필요가 없다는 장점이 있다.

vue-auto-routing 설치 순서는 아래와 같다

npm install vue-router@4
vue add auto-routing

 

다음으로 main.js에 use를 통해 router를 사용해주도록 한다.

참고로 router > index.js의 내용은 "vue add auto-routing"명령어를 통해 자동적으로 잡아준다.

// router > index.js
import { createRouter, createWebHistory } from 'vue-router'
import routes from 'vue-auto-routing'
import { createRouterLayout } from 'vue-router-layout'

const RouterLayout = createRouterLayout(layout => {
  return import('@/layouts/' + layout + '.vue')
})

const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes: [
    {
      path: '/',
      component: RouterLayout,
      children: routes
    }
  ]
})

export default router




//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');

 

다음으로는 App.vue에 router-view를 추가해준다.

 

<template>
  <router-view/>
</template>

<script>
export default {
  name: 'App'
}
</script>

<style>
</style>

 

2.🧟‍♀️ vue auto routing 구조 

 

vue routing은 크게 layouts, pages를 나뉘어진다

layouts : 전체 틀을 잡아주는 구조

pages : layouts 밑에 만들어지는 화면

 

모습은 아래와 같다.

위 모습은 개념적인 모습이고 실제 모습은 아래와 같다

 

layouts < default.vue가 기본적으로 처음 진입하는 화면이고, 

pages < index.vue는 default.vue의 자식이라고 생각하면 될것같다.

3.🎍 vuex 설치

vuex를 통해 네비게이션 가드를 사용할려면 vuex설치가 필요하다 설치는 아래와 같다.

npm install vuex@next --save

그리고 폴더구조는 아래와 같다

src > store  > index.js

 

그리고 간단하게 vuex 파일은 아래와 같다.

 

import { createStore } from 'vuex';

const store  = createStore({
    state:{

    },
    getters:{
        
    },
    mutations:{

    },
    actions:{}
});

export default store;

마지막으로 main.js에 추가해준다.

 

//main.js
import { createApp } from 'vue'
import App from './App.vue';
import router from './router';
import store from './store';

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

4.🚒 vue 네비게이션 가드 사용

index.vue화면에 route설정 추가

<route>
{
  "name": "home",
  "meta": {
    "requiresAuth": true
  }
}
</route>
<template>
  <div class="home">
    <h1>1</h1>
  </div>
</template>

<script>
// @ is an alias to /src
export default {
  name: 'home'
}
</script>

위에서 <route></route>를 통해 화면에 대한 설정을 해준다. 이 화면 같은 경우 "requiresAuth" : true 를 통해 검증이 필요하다는 것을 알려준다.

 

다음으로는 store에 state에 token을 추가해준다.

import { createStore } from 'vuex';

const store  = createStore({
    state:{
        token:''
    },
    getters:{
        
    },
    mutations:{

    },
    actions:{}
});

export default store;

 

마지막으로 router에서 beforeEach를 통해 해당화면의 requiresAuth가 true이면 store에 token 존재 여부를 통해 화면에 진입할지 말지 결정한다. store에 token 값이 비어있으면, router.push('/about')를 통해 about화면으로 이동하고 그 이외의 경우에는 next()를 통해 해당화면으로 이동한다.