Vuejs2 VueRouter、VueJS和Laravel路线守卫

我想将我的应用程序的一个特定页面隐藏在一个安全层后面（一个简单的密码表单，它将向服务器发送一个验证请求）

根据VueRouter的文档，我认为在进入之前使用

是合适的。然而，我不完全确定如何要求用户访问特定组件，然后在被允许继续执行当前路由之前成功输入密码

有人举过这样的例子吗？我很难找到类似的东西

import Vue from 'vue';
import VueRouter from 'vue-router';

Vue.use(VueRouter);

const routes = [
  { path: '/test/:testURL', component: require('./components/test.vue'), 
    beforeEnter: (to, from, next) => {
           // somehow load another component that has a form
           // the form will send a request to Laravel which will apply some middleware
           // if the middleware successfully resolves, this current route should go forward. 
    }
  },
];

const router = new VueRouter({
  routes,
  mode: 'history',
});

const app = new Vue({
  router
}).$mount('#app');

假设您只想对所选组件执行身份验证，则可以在进入前使用route guard。使用以下代码

const routes = [
  { path: '/test/:testURL', component: require('./components/test.vue'), 
    beforeEnter:requireLogin
  },
];

function requireLogin(to, from, next) {
    if (authenticated) {
        next(true);
    } else {
        next({
            path: '/login',
            query: {
                redirect: to.fullPath
            }
        })
    }
}

此外，您可以在login组件中创建登录屏幕和操作，以便在将authenticated变量设置为true后重定向到给定的重定向参数。我建议您在veux商店中维护已验证的变量
这很好--非常感谢！我不确定项目本身是否需要VueX（目前我通常没有任何共享数据）。否则，您将如何维护这个经过身份验证的变量？我想的是一个cookie，而不是一个变量，所以我很好奇这个方法看起来像什么。下一个最佳方法是在浏览器本地存储中捕获此值。它确实有好处。我将研究一下本地存储位！所以我才意识到这一点——我对身份验证以及它如何与前端交互（主要是与blade等之前的产品一起工作）还不熟悉。基于
authenticated
的值来确定身份验证流程是否明智？这难道不是一个存储在前端的变量，任何人都可以修改它吗？如果你只做前端验证，是的，你是对的，甚至保存在javascript本身也不够安全。