VueRouter、VueJS 和 Laravel 路由守卫

Question

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

根据 VueRouter 的文档，我认为beforeEnter 是合适的。但是，我不完全确定如何要求用户访问特定组件，然后成功输入密码，然后才能继续当前路线。

有人有这方面的例子吗？我找不到类似的东西。

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');

Answer 1

假设您只想对选定的组件执行身份验证，您可以使用 beforeEnter 路由保护。使用以下代码。

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
            }
        })
    }
}

此外，您可以在将 authenticated 变量设置为 true 后，在 login 组件中创建登录屏幕和操作以重定向到给定的重定向参数。我建议您在 veux 存储中维护 authenticated 变量