82 lines
2.8 KiB
JavaScript
82 lines
2.8 KiB
JavaScript
import Vue from 'vue'
|
|
import VueRouter from 'vue-router'
|
|
import HomeView from '../views/HomeView.vue'
|
|
import store from '../store'
|
|
Vue.use(VueRouter)
|
|
|
|
const routes = [
|
|
{
|
|
path: '/',
|
|
name: 'home',
|
|
component: HomeView
|
|
},
|
|
{
|
|
path: '/about',
|
|
name: 'about',
|
|
// route level code-splitting
|
|
// this generates a separate chunk (about.[hash].js) for this route
|
|
// which is lazy-loaded when the route is visited.
|
|
component: () =>
|
|
import(/* webpackChunkName: "about" */ '@/views/AboutView.vue')
|
|
},
|
|
{
|
|
path: '/login',
|
|
name: 'login',
|
|
component: () =>
|
|
import(
|
|
/* webpackChunkName: "auth", webpackPrefetch:true */ '@/views/loginView.vue'
|
|
)
|
|
},
|
|
{
|
|
path: '/todo',
|
|
name: 'todo',
|
|
component: () =>
|
|
import(
|
|
/* webpackChunkName: "api", webpackPrefetch:true */ '@/views/todoView.vue'
|
|
),
|
|
meta: { requiredAuth: true }
|
|
}
|
|
]
|
|
|
|
const router = new VueRouter({
|
|
mode: 'history',
|
|
//base: process.env.BASE_URL,
|
|
routes
|
|
})
|
|
|
|
// 참고 :
|
|
// https://vueschool.io/lessons/how-to-configure-an-authentication-middleware-route-guard-with-vue-router
|
|
// https://joshua1988.github.io/web-development/vuejs/vue-router-navigation-guards/
|
|
// https://www.bottlehs.com/vue/vue-js-jwt-기반-사용자-인증/
|
|
// 아래와 같이 가드는 3가지가 있음
|
|
// 1. 전역가드 : router.beforeEach((to, from, next) 이런식으로 전체에 대해 특정조건 (meta: { requiredAuth: true })으로 사용
|
|
// 2. 라우터 가드: 특정 Route Path아래에 직접선언-> beforeEach: function(to, from, next){}
|
|
// 3. 컴포넌트 가드: 특정 vue 파일내에서 바로 선언해서 사용 :// view/Mypage.vue ( Mypage Components )
|
|
// 로그인 처리 과정용
|
|
// to : 이동할 url 정보가 담긴 라우터 객체
|
|
// from : 현재 url 정보가 담긴 라우터 객체
|
|
// next : to에서 지정한 url로 이동하기 위해 꼭 호출해야 하는 함수
|
|
//여기에서 login은 path가 아니라 name에서 찾는다
|
|
//router.beforeEach()를 호출하고 나면 모든 라우팅이 대기 상태가 된다
|
|
router.beforeEach((to, from, next) => {
|
|
//1. routes 설정에서 meta: { requiredAuth: true } 가 선언된 경우
|
|
if (to.matched.some((route) => route.meta.requiredAuth)) {
|
|
//2. 로그인 인증 않된 경우
|
|
//console.log(store.getters)
|
|
console.log('Router 인증확인:' + store.getters['AuthStore/isAuthenticated'])
|
|
if (!store.getters['AuthStore/isAuthenticated']) {
|
|
console.log(from.name + ' => 3. To[' + to.name + '] => 로그인')
|
|
next({ name: 'login', params: { return_url: to.name } })
|
|
} else {
|
|
//3. 로그인 인증완료
|
|
console.log(from.name + ' => 2. 이미인증완료 => ' + to.name)
|
|
next()
|
|
}
|
|
} else {
|
|
console.log(from.name + ' => 1. 인증요구 없음 => ' + to.name)
|
|
next()
|
|
}
|
|
})
|
|
|
|
export default router
|