[Vue3] Router 에서 권한 체크해서 login 페이지로 보내기

 

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 },
    }
  }
})