ログインしているかどうかは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;