vue-router로 로그인하지 않은 경우 로그인 페이지로 돌아가는 과정

로그인했는지 여부는 vuex를 사용하여 isLogged라는 state에 있습니다.
포인트는 한번 router라는 변수에 router 객체를 넣고 나서 router.beforeEach (을)를 사용해 각 라우팅전에 리다이렉트 조건을 추가하는 곳입니다.

이것은 NG
export default new Router({
  routes: [
//
  ],
});

이것이 정답

import Vue from "vue";
import Router from "vue-router";
import Login from "@/views/login";
import Mypage from "@/views/mypage";
import store from '@/store/index';

Vue.use(Router);

const router = new Router({
  routes: [
    {
      path: "/",
      name: "top",
      component: Login,
      beforeEnter: (to, from, next) => {
        next('/login');
      }
    },
    {
      path: "/login",
      name: "login",
      component: Login
    },
    {
      path: "/mypage",
      name: "mypage",
      component: Mypage
    },
  ]
});

router.beforeEach((to, from, next) => {
  if (to.name === "top" ||to.name === "login") {
    if(store.state.auth.isLogged){
      next('/mypage');
    }else{
      next();
    }
  } else {
    if(store.state.auth.isLogged){
      next();
    }else{
      next('/');
    }
  }
});

export default router;

좋은 웹페이지 즐겨찾기