vue-routerでログインしていない場合はログインページに戻す処理

ログインしているかどうかはvuexを使ってisLoggedというstateに持っている。
ポイントは一度routerという変数にrouterオブジェクトを入れて、からrouter.beforeEachを使って各ルーティングの前にリダイレクト条件を追加するところです。

これはNG

Copied!

export default new Router({
  routes: [
//
  ],
});

これが正解

Copied!

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;