반응형
router/index.js
import {createRouter, createWebHistory} from 'vue-router'
const router = createRouter({
history: createWebHistory(import.meta.env.BASE_URL),
routes: [
{
path: '/posts',
component: PostsLayout,
children: [
{
path: 'new',
component: PostsNew,
// only authenticated users can create posts
meta: { requiresAuth: true },
},
{
path: ':id',
component: PostsDetail,
// anybody can read a post
meta: { requiresAuth: false },
},
],
},
],
})
router.beforeEach((to, from) => {
if (to.meta.requiresAuth && !auth.isLoggedIn()) {
// 위에서 meta: { requiresAuth: true } 이고 isLoggedIn 이 아니면
// 로그인 페이지로 보내버림
return {
path: '/login',
// save the location we were at to come back later
query: { redirect: to.fullPath },
}
}
})
728x90
반응형
'Vue.js' 카테고리의 다른 글
[Vue] computed 사용할 때 파라메터 넘기기 (0) | 2023.09.10 |
---|---|
[Vue3] Vuex 에서 parameter 가 context? {commit}? (2) | 2023.09.05 |
[Vue] vuex 설치 (0) | 2023.08.20 |
[Vue3] Stand Alone #6. Component 만들기 (4) | 2022.03.21 |
[Vue3] Stand Alone #5. bootstrap CDN 으로 사용하기 (0) | 2022.03.21 |
댓글