javascript VUE路由器で认证分岐を実装

Posted 2021-05-03

router.beforeEach((to, from, next) -> {
    if(to.matched.some(record => record.meta.requiresAuth)) {
        // ルート認証が必要なpathにリクエストが来た場合はif句に入る
        // ここで認証しているかどうかなどの処理を記述
        if (!auth.loggedIn()) {
            next({
                path: '/login',
                query: {redirect: to.fullPath}
            })
        } else {
            next()
        }
    } else {
        next() // nextを常に呼び出すようにしておかないとループしてしまう
    }
})


// router.js
const router = new VueRouter ({
    routers: [
        {
            path: '/foo',
            component: Foo,
            children: [
                path: 'bar',
                component: Bar,
                meta: {requiresAuth: true} // メタフィールド（このルートに認証が必要という意味）
            ]
        }
    ]
})