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

此外，您可以在登录组件中创建登录屏幕和操作，以便在将经过身份验证的变量设置为true后重定向到指定的重定向参数。我建议您在veux商店中维护经过身份验证的变量

VueRouter，VueJS和Laravel路线卫士

1 个答案: