kayawari
7/26/2019 - 1:40 PM

vue-routerで認証分岐を実装

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} // メタフィールド(このルートに認証が必要という意味)
            ]
        }
    ]
})