VueJS 路由上的 Laravel 中间件答案

【问题标题】：Laravel middleware on a VueJS routeVueJS 路由上的 Laravel 中间件
【发布时间】：2020-06-24 15:10:56
【问题描述】：

我的 SPA 应用程序中有一个 VueJS 路由。我想将 Laravel 中间件应用于路由（在本例中为 auth 中间件）。

其实我已经试过了：

app.js

const router = new VueRouter({
    mode: 'history',
    routes: [
        {
            path: '/',
            name: 'home',
            component: require('./views/Home').default,
        },
        {
            path: '/hello',
            name: 'hello',
            component: require('./views/Hello').default,
        },
    ],
});

路由/web.php

Route::get('/hello', 'HomeController@home')->middleware('auth');
Route::get('/{any}', 'FrontendController@index')->where('any', '.*');

在这段代码中，我尝试将auth 中间件链接到路由/hello，但它不起作用。最好的方法是什么？

谢谢。

【问题讨论】：

你怎么知道它不起作用？您的浏览器可能会自动发送 Laravel 需要为 auth:web 中间件识别您的 cookie。您可以判断您是否在控制器内部检查request()->user()。
@amphetamachine 我不明白你会说什么。我知道它不起作用，因为我已经测试了这段代码。当我导航到“/hello”时，它不会将我重定向到“/login”（就像中间件应该做的那样）
尝试颠倒路由声明的顺序；我认为 Laravel 遵循路线的最后人入策略，即最后一个声明的路线适用于不明确的路线。您也可以尝试使用./artisan route:list 进行调试。
@amphetamachine 同样的问题。

标签： laravel vue.js

【解决方案1】：

我已经有 6 年没有使用 Laravel，而是使用 Vue。我相信这是因为你永远不会进入你的 Laravel 路线，因为 Vue 应用程序是组装好的，因此它在浏览器中完全可用。

如果你通过延迟加载将组件加载到Vue路由器中会有所不同。

component: () => import(/* webpackChunkName: "hello" */ './views/helo.vue')

我不知道 Laravel 到底是如何工作的。我使用 Vue CLI 工具。希望这对您有所帮助。

【讨论】：