如何保护 Vue.js 和 Laravel 中的前端路由？

Question

如何保护前端的 Vue.js 路由。 我正在为博客使用 Laravel 和 vue.js 但是当我为前端路由时，如果管理员登录，当我点击前端 url 那么如何防止这个面板登录？

let routes = [
        { path: '/dashboard', component: require('./components/Dashboard.vue').default},
        { path: '/profile', component: require('./components/Profile.vue').default },
        { path: '/users', component: require('./components/Users.vue').default },
        //Frontent routes
        { path: '/', component: require('./components/frontend/blog/PublichHome.vue').default },
        { path: '/blog', component: require('./components/frontend/blog/Blog.vue').default },
        { path: '*', component: require('./components/NotFound.vue').default }
      ]

Answer 1

我假设您使用的是 VueRouter，是吗？ 如果是这样，您将要添加类似

function guard(to, from, next){
    if (to.name !== 'Login' && !isAuthenticated) next({ name: 'Login' })
    else next()
}

let routes = [
        { 
            path: '/dashboard', 
            component: require('./components/Dashboard.vue').default, 
            beforeEnter: guard(to, from, next),
        }
        { path: '/profile', component: require('./components/Profile.vue').default, beforeEnter: guard(to, from, next),},
        { path: '/users', component: require('./components/Users.vue').default, beforeEnter: guard(to, from, next),},
        //Frontent routes
        { path: '/', component: require('./components/frontend/blog/PublichHome.vue').default },
        { path: '/blog', component: require('./components/frontend/blog/Blog.vue').default },
        { path: '*', component: require('./components/NotFound.vue').default }
      ]

这是有关该主题的VueRouter Docs Navigation Guards的链接，以获取更多信息。