Question

如何保护Vue.js Route for Frontend。我在博客中使用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的链接，以获取更多信息。

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

1 个答案: