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

此外，您可以在 login 组件中创建登录屏幕和操作，以在设置 [=15= 后重定向到给定的重定向参数 ]authenticated 变量为真。我建议你在 veux store

中维护 authenticated 变量

VueRouter、VueJS 和 Laravel 路由守卫

VueRouter, VueJS, and Laravel route guard

vue-router

vuejs2